1. 程式人生 > 其它 >動態路由選單

動態路由選單

importrouterfrom'./router'; importstorefrom'./store'; importNProgressfrom'nprogress';//progressbar import'nprogress/nprogress.css';//progressbarstyle import{getToken}from'@/utils/auth';//gettokenfromcookie importgetPageTitlefrom'@/utils/get-page-title'; importLayoutfrom'@/layout'; const_import=require('./router/_import_'+process.env.NODE_ENV); NProgress.configure({showSpinner:false});//NProgressConfiguration
constwhiteList=['/login'];//noredirectwhitelist letgetRouter; router.beforeEach(async(to,from,next)=>{ //startprogressbar NProgress.start();
//setpagetitle document.title=getPageTitle(to.meta.title);
//determinewhethertheuserhasloggedin consthasToken=getToken();
if(hasToken){ //console.log('有token') if(to.path==='/login'){ //ifisloggedin,redirecttothehomepage next({path:'/'}); NProgress.done(); }else{ if(getRouter){ next(); }else{ consthasGetUserInfo=store.state.user.menus; if(hasGetUserInfo){ getRouter=store.getters.menus; routerGo(to,next);//執行路由跳轉方法 }else{ try{ awaitstore.dispatch('user/selectMenuBy',store.getters.name) getRouter=store.getters.menus; routerGo(to,next);//執行路由跳轉方法 }catch(error){ awaitstore.dispatch('user/resetToken'); //Message.error(error||'HasError') next(`/login?redirect=${to.path}`); NProgress.done(); } } } } }else{ /*hasnotoken*/ if(whiteList.indexOf(to.path)!==-1){ //inthefreeloginwhitelist,godirectly next(); }else{ //otherpagesthatdonothavepermissiontoaccessareredirectedtotheloginpage. next(`/login?redirect=${to.path}`); NProgress.done(); } } });
router.afterEach(()=>{ //finishprogressbar NProgress.done(); });
functionfilterAsyncRouter(asyncRouterMap){ constaccessedRouters=asyncRouterMap.filter(route=>{ if(route.component){ if(route.component==='Layout'){ route.component=Layout; }else{ route.component=_import(route.component); } } if(route.children&&route.children.length){ route.children=filterAsyncRouter(route.children); } returntrue; }); returnaccessedRouters; } functionrouterGo(to,next){ getRouter=filterAsyncRouter(getRouter);//過濾路由 router.addRoutes(getRouter);//動態新增路由 global.antRouter=getRouter;//將路由資料傳遞給全域性變數,做側邊欄選單渲染工作 next({...to,replace:true}); }