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

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

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

这工作正常，除非我登录并且如果我重新加载我的受保护页面 /private 然后它被重定向到登录，所以似乎 store.state.auth.user 的值在 router.beforeEach 内没有准备好 .

那么如何设置我的路由器以便在合适的时刻获得商店的 Value 呢？

我的文件如下：

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
  }
}

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()
  })
})

回复于 2024-05-08T11:15:16+08:00

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

1 回答

相关问题