uniapp通过uni.addInterceptor实现路由拦截功能

扒了插件市场的uni-start，抽出来的简单的路由拦截功能。

项目结构

|--|-- App.vue|-- index.html|-- main.js|-- manifest.json|-- pages.json|-- uni.scss|-- .hbuilderx|   |-- launch.json|-- api # api文件|-- components # 自定义组件，按照格式：组件名/组件名.vue，使用组件时无需引入，直接使用即可|-- pages  # 页面|-- static # 静态资源|-- store # vuex存储|   |-- getters.js|   |-- index.js|   |-- modules|       |-- app.js|       |-- user.js|-- styles # 样式文件|   |-- theme.scss|-- uni_modules # ui组件|-- utils|-- auth.js # 权限存储函数|-- constant.js # 常量，如api前缀|-- index.js # 公共方法|-- mixin.js # mixin，主题切换、登录校验|-- permission.js # 路由拦截|-- request.js # 请求拦截，请求响应统一处理|-- vue.config.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 '@/utils/auth'// 白名单
const whiteList = ['/', // 注意入口页必须直接写 '/'{ pattern: /^\/pages\/list.*/ }, // 支持正则表达式'/pages/grid/grid','/pages/user-center/user-center',{ pattern: /^\/pages\/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]console.log('url', url)// 判断当前窗口是白名单，如果是则不重定向路由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: 'none'})uni.navigateTo({url: "/pages/login/login"})return false}return e},fail(err) { // 失败回调拦截console.log(err)}})})
}

`APP.vue`

<script>
import routingIntercept from '@/utils/permission.js'
export default {globalData: {searchText: ''},onLaunch: function() {// 对路由进行统一拦截，实现路由导航守卫 router.beforeEach 功能routingIntercept()},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}
}
</script><style>/*每个页面公共css */
</style>

uniapp通过uni.addInterceptor实现路由拦截功能相关推荐

vue vue-router实现路由拦截功能
vue vue-router实现路由拦截功能 1.目录结构 2.设置路由拦截. 路由配置如下,在这里自定义了一个对象的参数meta: {authRequired: true}来标记哪些路由是需要登录验 ...
react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能(导航守卫) 背景方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例自定义Prompt组件的提示弹窗方法2:通过 ...
uniapp实现微信小程序登录注册功能
利用uniapp的uni.login()函数实现登录功能uni.login(OBJECT) | uni-app官网 <script>// 用户登录获取用户信息接口import {login ...
uni.request请求响应拦截封装
新建request.js文件 uni.addInterceptor('request', {invoke(args) {//拦截前触发let baseUrl = "https://www.x ...
UNIAPP实战项目笔记28 商品分享功能点分享按钮分享到微信好友
UNIAPP实战项目笔记28 商品分享功能点分享按钮分享到微信好友 detail.vue 加生命周期 // 点击分享onNavigationBarButtonTap(e) {if(e.type===' ...
uniapp实现简单的音乐播放器功能
uniapp实现简单的音乐播放器功能问题描述: 创建并返回内部audio上下文来控制音乐播放我是直接用scroll-into-view来实现的这个 <scroll-view scroll-y ...
vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
react-router v6 路由统一管理及路由拦截方案
2022-03-11 更新: 升级插件至1.1.3版本,支持 TypeScript. 2022-03-02 更新: 修复项目打包后可能无法加载路由的问题:升级插件至1.0.0版本,该版本使用方式上有差 ...
uni-app:实现页面未登录时拦截，弹出‘请先登录提示’
uni-app:实现页面未登录时拦截,弹出'请先登录提示' 首先我的接口是封装好的,如图所示: 若需要判断是否登录,只需将auth改为true auth: true 在index.js中添加逻辑我是 ...

uniapp通过uni.addInterceptor实现路由拦截功能

项目结构

`auth.js`

`permission.js`

`APP.vue`

uniapp通过uni.addInterceptor实现路由拦截功能相关推荐

最新文章

热门文章