import router from'./router'import store from'./store'import{ Message }from'element-ui'import NProgress from'nprogress'// progress barimport'nprogress/nprogress.css'// progress bar styleimport{ getToken }from'@/utils/auth'// get token from cookieimport getPageTitle from'@/utils/get-page-title'
NProgress.configure({showSpinner:false})// NProgress Configurationconst whiteList =['/login','/auth-redirect']// no redirect whitelist
router.beforeEach(async(to, from, next)=>{// start progress bar
NProgress.start()// set page title
document.title =getPageTitle(to.meta.title)// determine whether the user has logged inconst hasToken =getToken()if(hasToken){if(to.path ==='/login'){// if is logged in, redirect to the home pagenext({path:'/'})
NProgress.done()// hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939}else{// determine whether the user has obtained his permission roles through getInfoconst hasRoles = store.getters.roles && store.getters.roles.length >0if(hasRoles){next()}else{try{// get user info// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']const{ roles }=await store.dispatch('user/getInfo')// generate accessible routes map based on rolesconst accessRoutes =await store.dispatch('permission/generateRoutes', roles)// dynamically add accessible routes
router.addRoutes(accessRoutes)// hack method to ensure that addRoutes is complete// set the replace: true, so the navigation will not leave a history recordnext({...to,replace:true})}catch(error){// remove token and go to login page to re-loginawait store.dispatch('user/resetToken')
Message.error(error ||'Has Error')next(`/login?redirect=${to.path}`)
NProgress.done()}}}}else{/* has no token*/if(whiteList.indexOf(to.path)!==-1){// in the free login whitelist, go directlynext()}else{// other pages that do not have permission to access are redirected to the login page.next(`/login?redirect=${to.path}`)
NProgress.done()}}})
router.afterEach(()=>{// finish progress bar
NProgress.done()})
三、路由生成permission.js
import{ asyncRoutes, constantRoutes }from'@/router'/**
* Use meta.role to determine if the current user has permission
* @param roles
* @param route
*/functionhasPermission(roles, route){if(route.meta && route.meta.roles){return roles.some(role=> route.meta.roles.includes(role))}else{returntrue}}/**
* Filter asynchronous routing tables by recursion
* @param routes asyncRoutes
* @param roles
*/exportfunctionfilterAsyncRoutes(routes, roles){const res =[]
routes.forEach(route=>{const tmp ={...route }if(hasPermission(roles, tmp)){if(tmp.children){
tmp.children =filterAsyncRoutes(tmp.children, roles)}
res.push(tmp)}})return res
}const state ={routes:[],addRoutes:[]}const mutations ={SET_ROUTES:(state, routes)=>{
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)}}const actions ={generateRoutes({ commit }, roles){returnnewPromise(resolve=>{let accessedRoutes
if(roles.includes('admin')){
accessedRoutes = asyncRoutes ||[]}else{
accessedRoutes =filterAsyncRoutes(asyncRoutes, roles)}commit('SET_ROUTES', accessedRoutes)resolve(accessedRoutes)})}}exportdefault{namespaced:true,
state,
mutations,
actions
}
四、动态追加路由
import router from'./router'import store from'./store'import{ Message }from'element-ui'import NProgress from'nprogress'// progress barimport'nprogress/nprogress.css'// progress bar styleimport{ getToken }from'@/utils/auth'// get token from cookieimport getPageTitle from'@/utils/get-page-title'
NProgress.configure({showSpinner:false})// NProgress Configurationconst whiteList =['/login','/auth-redirect']// no redirect whitelist
router.beforeEach(async(to, from, next)=>{// start progress bar
NProgress.start()// set page title
document.title =getPageTitle(to.meta.title)// determine whether the user has logged inconst hasToken =getToken()if(hasToken){if(to.path ==='/login'){// if is logged in, redirect to the home pagenext({path:'/'})
NProgress.done()// hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939}else{// determine whether the user has obtained his permission roles through getInfoconst hasRoles = store.getters.roles && store.getters.roles.length >0if(hasRoles){next()}else{try{// get user info// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']const{ roles }=await store.dispatch('user/getInfo')// generate accessible routes map based on rolesconst accessRoutes =await store.dispatch('permission/generateRoutes', roles)// dynamically add accessible routes
router.addRoutes(accessRoutes)// hack method to ensure that addRoutes is complete// set the replace: true, so the navigation will not leave a history recordnext({...to,replace:true})}catch(error){// remove token and go to login page to re-loginawait store.dispatch('user/resetToken')
Message.error(error ||'Has Error')next(`/login?redirect=${to.path}`)
NProgress.done()}}}}else{/* has no token*/if(whiteList.indexOf(to.path)!==-1){// in the free login whitelist, go directlynext()}else{// other pages that do not have permission to access are redirected to the login page.next(`/login?redirect=${to.path}`)
NProgress.done()}}})
router.afterEach(()=>{// finish progress bar
NProgress.done()})