vue路由权限配置-简易版

import router from ‘./router’ // 引入路由
import store from ‘./store’ // 引入状态管理
import { Message } from ‘element-ui’ // 引入ui框架
import NProgress from ‘nprogress’ // 进度条文件
import ‘nprogress/nprogress.css’ // 进度条样式文件
import { getToken } from ‘@/utils/auth’ // 取token
import getPageTitle from ‘@/utils/get-page-title’ // 获取页面名称

NProgress.configure({ showSpinner: false }) // 配置进度条
const whiteList = [’/login’] // 路由白名单
router.beforeEach(async(to, from, next) => {
// 开启进度条
NProgress.start()
// 页面的名称
document.title = getPageTitle(to.meta.title)
// 获取token
const hasToken = getToken()
// 判断是否有token
if (hasToken) {
if (to.path === ‘/login’) {
// 有token代表已经登录，然后又进login页面，给他跳转到首页
next({ path: ‘/’ })
// 关闭动画
NProgress.done()
} else {
// 有token跳转到其他页面，获取登录权限信息，可以根据这个权限信息来做侧边栏的控制
// 获取登录信息
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
// 有信息正常跳转
next()
} else {
try {
// 没有信息，执行方法获取登录信息
await store.dispatch(‘user/getInfo’)
// 进行正常跳转
next()
} catch (error) {
// 如果出现异常，删除令牌，进入登录页面重新登录
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘系统错误’)
next(/login?redirect=${to.path})
// 关闭动画
NProgress.done()
}
}
}
} else {
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 如果是白名单，那么正常跳转
next()
} else {
// 不是白名单，跳转到登录页面，携带即将跳转页面参数
next(/login?redirect=${to.path})
NProgress.done()
}
}
})

router.afterEach(() => {
// 离开每一个页面都停掉动画
NProgress.done()
})