Vue多页面路由守卫(鉴权处理)怎么实现?
多页面不想单页面可以使用router.beforeEach 钩子。因为router都没使用了。那这种情况遇到需要权限才能访问的页面怎么办呢?比如用户中心,要登录才能访问。这里有个方式呢,就是利用路径屁匹配的方式达到拦截的效果。原理呢就是访问的时候去匹配该路由是否需要权限,如果需要就结合判断登录状态去拦截。核心代码就在这:/***获取路由地址路径* @returns {...
·
多页面不想单页面可以使用 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() 方法了,拿到当前的路径去跟定义的的路径对象中的每个地址去比对。
更多推荐
已为社区贡献13条内容
所有评论(0)