Vue多页面路由守卫(鉴权处理)怎么实现？

多页面不想单页面可以使用 router.beforeEach 钩子。因为router都没使用了。那这种情况遇到需要权限才能访问的页面怎么办呢？

比如用户中心，要登录才能访问。

这里有个方式呢，就是利用路径匹配的方式达到拦截的效果。原理呢就是访问的时候去匹配该路由是否需要权限，如果需要就结合判断登录状态去拦截。

核心代码就在这：

/**
 *获取路由地址路径
 * @returns {string}
 * @constructor
 */
export function GetUrlRelativePath() {
    var url = document.location.toString();
    var arrUrl = url.split("//");

    var start = arrUrl[1].indexOf("/");
    var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

    if(relUrl.indexOf("?") != -1){
        relUrl = relUrl.split("?")[0];
    }
    return relUrl;
}

/**
 * 需要权限路由
 * @type {string[]}
 */
export const authentication = [
    "aUser",
    "aBoardAdd"
];

定义好获取好需登录的路由路径名字。

 在主  js 文件中 使用，先匹配 再 判断状态：

import * as configTool from "../../../util" //导入鉴权等工具
Vue.prototype.configTool = configTool;

Vue.config.productionTip = false;


/**
 * 鉴权处理
 * @author ***
 * @type {string | *}
 */
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){ //如果是需要权限的页面没有登录token的话,就转回登录界面
  window.location.href="/login"+configTool.urlRouter()+"/"
}else {
  new Vue({
    render: h => h(App),
    store,
  }).$mount('#app')
}

 在创建 vue 实例之前 拦截即可。

 

 这里最重要的就是some( ) 跟indexOf() 方法了,拿到当前的路径去跟定义的的路径对象中的每个地址去比对。