Question

使用vue-property-decorator的示例代码：

@Component
export default class Login extends Vue {
  private mounted(): void {
    this.$router.push({ name: 'home' })
  }
}

上面的代码在安装组件时成功重定向。但是在axios的响应中使用this.$router.push()时，什么也没发生：

private login(): any {
  return this.$http
    .login(this.form)
    .then(resp => {
      this.$store.dispatch('authenticateUser', user)
      this.$router.push({ name: 'home' })
    })
    .catch(err => {
      console.log(err)
    })
}

但是，在这种情况下，this.$store.dispatch()可以按原样工作，而不是this.$router.push()。可能是什么问题？

路由器配置：

import Vue from 'vue'
import Router from 'vue-router'

// routes
import auth from '@/routes/auth'
import dashboard from '@/routes/dashboard'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    ...auth,
    ...dashboard
  ]
})

验证中间件：

import store from '@/store'

export default {
  guest(to: any, from: any, next: any): void {
    if (store.state.auth.authenticated === false) {
      next()
    } else {
      next({
        path: '/dashboard'
      })
    }
  },
  auth(to: any, from: any, next: any): void {
    if (store.state.auth.authenticated) {
      next()
    } else {
      next({
        path: '/'
      })
    }
  }
}

验证路由（@ / routes / auth）：

import Guard from '@/middlewares/auth'

export default [
  {
    path: '/',
    name: 'login',
    component: () => import('@/views/Login.vue'),
    beforeEnter: Guard.guest
  }
]

如果我删除了beforeEnter路由器正在推送请求的视图，则该问题位于身份验证中间件中。

Answer 1

我必须使用this.$store.dispatch()的诺言，如下所示：

this.$store.dispatch('authenticateUser', user).then(() => {
  this.$router.push({ name: 'dashboard' })
})

路由器推送没有任何效果，因为它试图导航到另一个页面，而动作分配尚未完成，因此我的用户未通过身份验证，因此警卫队不允许我重定向。

路由器推送在axios响应中不起作用-Vue / Typescript

1 个答案: