Question

我正在使用最新版本的vue-router，vuex和feathers-vuex，我的路由器出了问题。

我正在做的是检查路由是否在meta.json文件中具有属性"requiresAuth": true。如果是，则检查feathers-vuex提供的store.state.auth.user的值，如果未设置此值，则重定向到登录。

除非我已登录并且如果我重新加载名为/private的受保护页面，然后将其重定向到登录状态，因此似乎store.state.auth.user的值未在router.beforeEach内准备好1}}。

那么如何设置路由器以便在合适的时刻获取商店的价值呢？

我的文件如下：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

const meta = require('./meta.json')

// Route helper function for lazy loading
function route (path, view) {
  return {
    path: path,
    meta: meta[path],
    component: () => import(`../components/${view}`)
  }
}

Vue.use(Router)

export function createRouter () {
  const router = new Router({
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: [
      route('/login', 'Login')
      route('/private', 'Private'),
      { path: '*', redirect: '/' }
    ]
  })

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
      if (!store.state.auth.user) {
        next('/login')
      } else {
        next()
      }
    } else {
      next()
    }
  })

  return router
}

meta.json

{
  "/private": {
    "requiresAuth": true
  }
}

Answer 1

我通过从vuex操作返回一个promise来解决问题，然后运行验证

router.beforeEach((to, from, next) => {
  store.dispatch('auth/authenticate').then(response => {
    next()
  }).catch(error => {
    if (!error.message.includes('Could not find stored JWT')) {
      console.log('Authentication error', error)
    }
    (to.meta.requiresAuth) ? next('/inicio-sesion') : next()
  })
})

如何设置vuex和vue-router以在未设置商店值时重定向？

1 个答案: