我的错误做法:
import router from './router'
import store from './store'
import layout from '@/layout/index'
import { getItem } from '@/utils/storage'
import { TOKEN } from '@/constant'
// 白名单
const whiteList = ['/login']
/**
* 路由前置守卫
*/
router.beforeEach(async (to, from, next) => {
// 存在 token ,进入主页
if (store.getters.token) {
if (to.path === '/login') {
next('/')
} else {
// 判断用户资料是否获取
// 若不存在用户信息,则需要获取用户信息
if (!store.getters.hasUserInfo) {
// 触发获取用户信息的 action
const { permission_id } = await store.dispatch('user/getUserInfoStore')
if (permission_id === 1 && permission_id !== null) {
const filterRoutes = [
{
path: '/user',
component: layout,
name: 'personnel',
redirect: '/user/manage',
meta: {
title: '用户',
icon: 'personnel'
},
children: [
{
path: '/user/manage',
name: 'manage',
component: () => import('@/views/user-manage/index'),
meta: {
title: '员工管理',
icon: 'personnel-manage'
}
},
{
path: '/user/import',
name: 'import',
component: () => import('@/views/import/index'),
meta: {
title: 'excelImport'
}
},
{
path: '/user/add',
name: 'add',
component: () => import('@/views/addUser/index'),
meta: {
title: 'userImport'
}
}
]
}
]
store.commit('permission/setRoutes', filterRoutes)
// 利用 addRoute 循环添加
filterRoutes.forEach((item) => {
router.addRoute(item)
})
// 添加完动态路由之后,需要在进行一次主动跳转
return next(to.path)
}
}
next()
}
} else {
// 没有token的情况下,可以进入白名单
if (whiteList.indexOf(to.path) > -1) {
next()
} else {
next('/login')
}
}
})
```
解决后:
let load = 0
router.beforeEach(async (to, from, next) => {
// 存在 token ,进入主页
if (getItem(TOKEN)) {
if (to.path === '/login') {
next('/')
} else {
if (!store.getters.hasUserInfo || load === 0) {// 关键点
// 触发获取用户信息的 action
const { permission_id } = await store.dispatch('user/getUserInfoStore')
if (permission_id === 1 && permission_id !== null) {
load++
const filterRoutes = [
{
path: '/user',
component: layout,
name: 'personnel',
redirect: '/user/manage',
meta: {
title: '用户',
icon: 'personnel'
},
children: [
{
path: '/user/manage',
name: 'manage',
component: () => import('@/views/user-manage/index'),
meta: {
title: '员工管理',
icon: 'personnel-manage'
}
},
{
path: '/user/import',
name: 'import',
component: () => import('@/views/import/index'),
meta: {
title: 'excelImport'
}
},
{
path: '/user/add',
name: 'add',
component: () => import('@/views/addUser/index'),
meta: {
title: 'userImport'
}
}
]
}
]
store.commit('permission/setRoutes', filterRoutes)
// 利用 addRoute 循环添加
filterRoutes.forEach((item) => {
router.addRoute(item)
})
// 添加完动态路由之后,需要在进行一次主动跳转
// next(to.path)
next({ ...to, replace: true })// 之前是return next(to.path)
}
}
next()
}
} else {
// 没有token的情况下,可以进入白名单
if (whiteList.indexOf(to.path) > -1) {
next()
} else {
next('/login')
}
}
})
问题原因:
出现问题的原因是判断条件store.getters.hasUserInfo。
我本来是想根据刷新后丢失vuex的userinfo来判断是不是刷新,第一个if判断token,有token说明是登陆状态。第二个判断hasuserinfo,如果没有值说明是刷新了或者第一次登录,但是实践中发现第一次登录确实是没有vuex的userinfo的正常显示路由,但是刷新后明明没有userinfo了,却还是显示有,也就是刷新后hasuserinfo还是为true。
解决:
在路由前置守卫前增加变量load = 0,一旦刷新,load永远是0。
增加动态路由的条件:(!store.getters.hasUserInfo || load === 0),第一次登录是前面,刷新后是后面。如果增加过动态路由,load++,目的在于如果没有刷新不至于死循环的一次次添加路由。
最后还改动了这个:next({ ...to, replace: true })// 之前是return next(to.path),表示如果addroute没完成,路由守卫会一层层的执行,直到addroute完成,找到对应路由。
因为发现如果还是之前的情况,进行一次主动跳转重新进了一次导航守卫,那么load还是0,会直接开始死循环一直是load === 0