uni-app 实现路由拦截
<p>1、auto.js</p><p>/**<br> * @description 权限存储函数<br> */<br>const authorizationKey = 'accessToken'</p>
<p>export function getAuthorization() {<br>return uni.getStorageSync(authorizationKey)<br>}</p>
<p>export function setAuthorization(authorization) {<br>return uni.setStorageSync(authorizationKey, authorization)<br>}</p>
<p>export function removeAuthorization(authorization) {<br>return uni.removeStorageSync(authorizationKey)<br>}</p>
<p>2、permission.js</p>
<p>/**<br> * @description 自定义路由拦截<br> */</p>
<p>import { getAuthorization } from '@/utils/auth.js'<br>import oneKeyLogin from '@/common/oneKeyLogin.js'<br>// 白名单<br>const whiteList = [<br>'/', // 注意入口页必须直接写 '/'<br>{ pattern: /^\/pages\/list.*/ }, // 支持正则表达式<br>{ pattern: /^\/pages\/guidePage.*/ }, // 支持正则表达式<br>'/pages/index/entrance',<br>'/pages/orders/orders',<br>'/pages/historicalCall/historicalCall',<br>'/pages/mine/mine',<br>{ pattern: /^\/pages\/login\/*/ }<br>]</p>
<p>export default async function() {<br>const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']<br>// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器<br>list.forEach(item => {<br> uni.addInterceptor(item, {<br> invoke(e) {<br> // 获取要跳转的页面路径（url去掉"?"和"?"后的参数）<br> const url = e.url.split('?')<br> // console.log('url', url,e)</p>
<p> // 判断当前窗口是白名单，如果是则不重定向路由<br> let pass<br> if (whiteList) {<br> pass = whiteList.some((item) => {<br> if (typeof (item) === 'object' && item.pattern) {<br> return item.pattern.test(url)<br> }<br> return url === item<br> })<br> }</p>
<p> // 不是白名单并且没有token<br> if (!pass && !getAuthorization()) {<br> // uni.showToast({<br> // title: '请先登录',<br> // icon: 'none'<br> // })<br> // uni.navigateTo({<br> // url: "/pages/login/login"<br> // })<br> if(plus.os.name==="Android"){<br> // 调用一键登录<br> uni.closeAuthView()<br> oneKeyLogin()<br> }else{<br> uni.navigateTo({<br> url:"/pages/login/login"<br> })<br> }<br> return false<br> }<br> return e<br> },<br> fail(err) { // 失败回调拦截<br> console.log(err)<br> }<br> })<br>})<br>}</p>
<p> </p>
<p>3、在APP.vue引入使用</p>
<p>import routingIntercept from '@/utils/permission.js'</p>
<p><img src="https://img2022.cnblogs.com/blog/1499880/202207/1499880-20220712170957951-75114742.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/chenjianbao/p/16470821.html
頁:
[1]