动态路由权限 - 升级版
第一步:创建权限文件permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login'] // 路由白名单
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
//获取登录时存到本地的token
const hasToken = localStorage.getItem("token")
if (to.query.token && hasToken != to.query.token) {
let param = {
token: to.query.token
}
// vuex自定义清空缓存数据
// store.dispatch('user/resetToken').then(() => {
// store.dispatch('user/setToken', param).then(() => {
// next({
// ...to,
// replace: true
// })
// })
// })
}
// determine whether the user has logged in
let watermarkDiv = document.getElementById("vue-watermark")
if (hasToken) {
if (store.getters.isLock && to.path !== '/lockScreen' && to.path !== '/login') {
next({
path: '/lockScreen'
})
NProgress.done()
} else if (to.path === '/login') {
// if is logged in, redirect to the home page
next({
path: '/'
})
NProgress.done()
} else {
// 判断vuex中是否存在菜单列表
const hasMenu = store.getters.menuList && store.getters.menuList.length > 0
if (hasMenu) {
next()
} else {
try {
// get user info
let res = await store.dispatch('user/getInfo')
// 获取路由 中间添加这一步 是为了动态添加一些不需要后台返回的,在前端配置的,可配置的路由,比如404页面,在generateRoutes中合并后台返回的和前端配置的
const accessRoutes = await store.dispatch('permission/generateRoutes', res)
// 动态添加路由
router.addRoutes(accessRoutes)
next({
...to,
replace: true //确保导航不会留下历史记录
})
} catch (error) {
// 清空缓存 并跳转登录
await store.dispatch('user/resetToken')
if (error && typeof (error) == 'string') Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
// 没有token 单在白名单中
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
NProgress.done()
} else {
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
第二步 在main.js中引入