在项目的入口文件写路由导航钩子,进入路由的时候判断当前是否有token,进行判断在管理后台手把手搭建(1)的时候已经详细介绍:代码如下
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
NProgress.configure({ showSpinner: false })// NProgress Configuration 禁用进度环
const whiteList = ['/login']// 白名单
router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
if (getToken()) { // determine if there has token
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetUserInfo').then(res => {
const roles = res.data.content.roles
store.dispatch('GenerateRoutes', { roles }).then(() => { router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
//拉取用户信息超时或者500
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' })
})
})
} else {
next()
}
}
}
else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
}
}
})
router.afterEach(() => {
NProgress.done() // finish progress bar
})
权限写完了,我们开始页面的渲染吧