1.現(xiàn)在有個問題 我們再沒有token情況下通過url可以直接訪問頁面 這不可以 所以我們需要添加路由守衛(wèi)? 攔截

?

2.permission.js的代碼

import router from "@/router/index"
import store from "@/store"

router.beforeEach((to,from,next)=>{
    const whiteList=['/login'] // 白名單
    let token=store.getters.GET_TOKEN;
    if(token){
        next();
    }else{
        if(whiteList.includes(to.path)){
            next();
        }else{
            next("/login");
        }
    }
})

?3.之后再main.js里面引入 使其生效

?4.補(bǔ)充知識 后面動態(tài)路由那里也會有這個問題

????????

beforeEach((to, from, next) => {
	to // 要去的路由
	from // 當(dāng)前路由
	next() // 放行的意思
}

next(‘/logon’) 、 next(to) 或者 next({ …to, replace: true })?

????????在路由守衛(wèi)中，只有next()是放行，其他的諸如：next(‘/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行，而是：中斷當(dāng)前導(dǎo)航，執(zhí)行新的導(dǎo)航

????????在守衛(wèi)中我使用next(‘/logon’）執(zhí)行過程

? ? ? ? ? ? ? ? 他不是直接放行 二十一致循環(huán)下去

beforeEach((to, from, next) => {
  beforeEach(('/logon', from, next) => {
  	 beforeEach(('/logon', from, next) => {
  	 	 beforeEach(('/logon', from, next) => {
  	 	 	beforeEac...  // 一直循環(huán)下去...... , 因為我們沒有使用 next() 放行
 		}
 	 }
  }
}

????????

beforeEach((to, from, next) => {
   if(to.path === '/home') {
   	next('/logon')
   } else {
    // 如果要去的地方不是 /home ， 就放行
   	next()
   }
}



實際執(zhí)行
beforeEach((to, from, next) => {
   beforeEach(('/logon', from, next) => {
     next()  // 現(xiàn)在要去的地方不是 /home ， 因此放行
   }

????????正以為如此很多人在使用動態(tài)添加路由addRoutes()會遇到下面的情況：
????????在addRoutes()之后第一次訪問被添加的路由會白屏，這是因為剛剛addRoutes()就立刻訪問被添加的路由，然而此時addRoutes()沒有執(zhí)行結(jié)束，因而找不到剛剛被添加的路由導(dǎo)致白屏。因此需要從新訪問一次路由才行。

????????

????????該如何解決這個問題 ?
????????此時就要使用next({ …to, replace: true })來確保addRoutes()時動態(tài)添加的路由已經(jīng)被完全加載上去。

????????next({ …to, replace: true })中的replace: true只是一個設(shè)置信息，告訴VUE本次操作后，不能通過瀏覽器后退按鈕，返回前一個路由。

????????因此next({ …to, replace: true })可以寫成next({ …to })，不過你應(yīng)該不希望用戶在addRoutes()還沒有完成的時候，可以點擊瀏覽器回退按鈕搞事情吧。

????????

????????其實next({ …to })的執(zhí)行很簡單，它會判斷：

????????如果參數(shù)to不能找到對應(yīng)的路由的話，就再執(zhí)行一次beforeEach((to, from, next)直到其中的next({ …to})能找到對應(yīng)的路由為止。

????????

????????也就是說此時addRoutes()已經(jīng)完成啦，找到對應(yīng)的路由之后，接下來將執(zhí)行前往對應(yīng)路由的beforeEach((to, from, next) ，因此需要用代碼來判斷這一次是否就是前往對應(yīng)路由的beforeEach((to, from, next)，如果是，就執(zhí)行next()放行。

????????如果守衛(wèi)中沒有正確的放行出口的話，會一直next({ …to})進(jìn)入死循環(huán) !!!

????????因此你還需要確保在當(dāng)addRoutes()已經(jīng)完成時，所執(zhí)行到的這一次beforeEach((to, from, next)中有一個正確的next()方向出口。文章來源地址http://www.zghlxwxcb.cn/news/detail-541121.html

到了這里，關(guān)于[VUE學(xué)習(xí)]權(quán)限管理系統(tǒng)前端vue實現(xiàn)8-右上角用戶頭像顯示實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！