Vue多頁面路由守衛 鑑權處理 怎麼實現？

多頁面不想單頁面可以使用 router.beforeeach 鉤子。因為router都沒使用了。那這種情況遇到需要許可權才能訪問的頁面怎麼辦呢？

比如使用者中心，要登入才能訪問。

這裡有個方式呢，就是利用路徑匹配的方式達到攔截的效果。原理呢就是訪問的時候去匹配該路由是否需要許可權，如果需要就結合判斷登入狀態去攔截。

核心**就在這：

/**

*獲取路由位址路徑
* @returns 
* @constructor
*/export function geturlrelativepath() 
return relurl;
}/**
* 需要許可權路由
* @type 
*/export const authentication = [
"auser",
"aboardadd"
];

定義好獲取好需登入的路由路徑名字。

在主  js 檔案中 使用，先匹配 再 判斷狀態：

import * as configtool from "../../../util" //匯入鑑權等工具

vue.prototype.configtool = configtool;
vue.config.productiontip = false;
/** * 鑑權處理
* @author ***
* @type 
*/const nowurl = configtool.geturlrelativepath();
const jurisdiction = configtool.authentication.some(item=>nowurl.indexof(item) != -1);//indexof() 如果不符合就返回-1,符合就返回位置
var getlocaldata = localstorage.getitem('u_s'); // 讀取字串資料
var jsonobj = json.parse(getlocaldata);
let token = jsonobj ? jsonobj['user_token'] : "";
if(jurisdiction && !token)else

在建立 vue 例項之前 攔截即可。

Vue路由鑑權

router index.js var router export default router newrouter 更多.let indexscrolltop 0router.beforeeach to,from next else else else if to.path document.ti...

vue路由鑑權（動態路由）

乙個系統有多個角色，不同角色登入後應該有不同的路由表，保證使用者亂輸url不會訪問到正確的位址，而是跳轉到404頁面。方法一 在路由資訊的meta中新增擁有當前許可權的角色 routes component import components login.vue component import v...

vue 路由守衛 token過期處理

想要實現只有在登入或者註冊成功的狀態下，才能進入系統，這時候就可以使用路由守衛 在route.js中進行配置 import vue from vue import vuerouter from vue router import index from views index.vue import r...