關(guān)于路由權(quán)限校驗(yàn)的方法放在permission文件中
先放一波原理圖
其實(shí)路由校驗(yàn)就是使用router守衛(wèi) router.beforeEach來對所有的路由進(jìn)行攔截校驗(yàn)
先看前面先打開加載條 然后更改網(wǎng)頁標(biāo)題? 之后獲得token的值
有了token的值我們就可以進(jìn)行下面的驗(yàn)證了? ?
驗(yàn)證分為兩步? 當(dāng)不存在時(shí)（也就是用戶未登錄時(shí)）以及token存在時(shí)（也就是用戶登錄以后）
一、token不存在時(shí)（用戶未登錄）
1.檢測想要登陸的頁面是否在白名單里面
如果在白名單里面 則調(diào)用next（）直接訪問
如果不在白名單里面 則重定向到‘/login’地址 將想要去的地址作為請求參數(shù)放到后面?
對應(yīng)情況：
沒有登錄的時(shí)候 想要訪問白名單里面的地址 可以直接訪問到? 例如訪問login
如果沒有訪問白名單內(nèi)的地址? 則會重定向到登錄頁面
二索守、當(dāng)token存在的時(shí)候（用戶登錄以后）
首先判斷想要訪問的網(wǎng)址是不是‘/login’? ?先說判斷為否的情況
1.如果不是訪問login
判斷是否創(chuàng)建了用戶? hasRoles為布爾值
如果創(chuàng)建了用戶則生成用戶權(quán)限范圍內(nèi)的頁面? ? 如果沒有創(chuàng)建用戶 則需要?jiǎng)?chuàng)建用戶并且設(shè)置權(quán)限路由
創(chuàng)建用戶
用store.dispatch調(diào)用store/modules/user.js下的getInfo方法 創(chuàng)建用戶
然后創(chuàng)建該用戶權(quán)限內(nèi)的動態(tài)路由
將動態(tài)路由加入到router中
這樣便生成了一個(gè)用戶并創(chuàng)建了改用戶相應(yīng)權(quán)限內(nèi)的路由? 這樣就會創(chuàng)建出符合用戶身份的界面
這樣如果 訪問的時(shí)候如果有用戶? 那么肯定會有相應(yīng)的路由
對應(yīng)情況：
沒有對象 對應(yīng)的情況是剛登錄的時(shí)候，用戶剛剛登陸還沒有創(chuàng)建用戶對應(yīng)的權(quán)限路由
有對象? ?對應(yīng)的情況是? 登錄以后已經(jīng)創(chuàng)建完用戶? 權(quán)限路由已經(jīng)確定
2.如果訪問‘/login’
則重定向到‘/’? 也就是重定向到主頁? 然后因?yàn)橹囟ㄏ蛄? 所以就會再調(diào)用一次?router.beforeEach 然后就會按照沒有訪問login路線走了
對應(yīng)情況：? 如果登陸以后想要退回到登陸頁面是不可以的? 登陸以后再訪問login地址就會定向到主頁
