uniapp实现路由跳转拦截

场景：系统可以不登录就可以访问浏览商城，一些菜单（购买、添加修改用户信息、添加地址、修改密码等）需要进行登录才能操作。

思路：

1.新建公共js文件进行路由拦截，添加白名单。（白名单菜单不需要鉴权登录，否则其他菜单需要鉴权登录）

2.其次在App.vue页面进行调用封装路由拦截js文件。

封装auth.js代码

/*** @description 权限存储函数*/
const authorizationKey = 'Authorization'export function getAuthorization() {return uni.getStorageSync(authorizationKey)
}export function setAuthorization(authorization) {return uni.setStorageSync(authorizationKey, authorization)
}export function removeAuthorization(authorization) {return uni.removeStorageSync(authorizationKey)
}

封装permission.js代码

/*** @description 自定义路由拦截*/
import {getAuthorization
} from '@/util/auth'
// 白名单
const whiteList = ['/', // 注意入口页必须直接写 '/''/pages/grid/grid',{pattern: /^\/pages\/login\/login\/*/} //支持正则表达式
]export default async function() {const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器list.forEach(item => {uni.addInterceptor(item, {invoke(e) {// 获取要跳转的页面路径（url去掉"?"和"?"后的参数）const url = e.url.split('?')[0]// 判断当前窗口是白名单，如果是则不重定向路由let passif (whiteList) {pass = whiteList.some((item) => {if (typeof(item) === 'object' && item.pattern) {return item.pattern.test(url)}return url === item})}// 不是白名单并且没有tokenif (!pass && !getAuthorization()) {// uni.showToast({// 	title: '请先登录',// 	icon: 'error'// })uni.redirectTo({url: "/pages/login/login"})return false}return e},fail(err) { // 失败回调拦截console.log(err)}})})
}

App.vue文件

	import routingIntercept from '@/util/permission.js'export default {onLaunch: function() {console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！');console.log('App Launch');// 对路由进行统一拦截，实现路由导航守卫 router.beforeEach 功能routingIntercept()},

测试只是把islogin页面需要鉴权登录，grid页面加到了白名单不需要鉴权登录，需要登录的重定向登录页面

看下效果如下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！