当前位置: 首页 > news >正文

uni-app路由拦截

新建一个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)
}

新建route.js

import { getAuthorization } from '@/utils/auth.js'

// 白名单
const whiteList = [
  '/', // 注意入口页必须直接写 '/'
  '/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]
        console.log('url', url)

        // 判断当前窗口是白名单,如果是则不重定向路由
        let pass
        if (whiteList) {
          pass = whiteList.some((item) => {
            if (typeof (item) === 'object' && item.pattern) {
              return item.pattern.test(url)
            }
            return url === item
          })
        }

        // 不是白名单并且没有token
        if (!pass && !getAuthorization()) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          uni.navigateTo({
            url: "/pages/Login/Login"
          })
          return false
        }
        return e
      },
      fail(err) { // 失败回调拦截
        console.log(err)
      }
    })
  })
}

APP.vue

import routingIntercept from '@/router/route.js'
    export default {
        onLaunch: function() {
            console.log('App Launch');
            // 对路由进行统一拦截,实现路由导航守卫 router.beforeEach 功能
            routingIntercept()
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
http://www.lryc.cn/news/25872.html

相关文章:

  • 如何使用固态继电器实现更高可靠性的隔离和更小的解决方案尺寸
  • 【YOLOv8/YOLOv7/YOLOv5系列算法改进NO.56】引入Contextual Transformer模块(sci期刊创新点之一)
  • 深圳大学计软《面向对象的程序设计》实验3 指针2
  • 【基于机器学习的推荐系统项目实战-2】项目介绍与技术选型
  • 对称锥规划:锥与对称锥
  • 4.基于Label studio的训练数据标注指南:情感分析任务观点词抽取、属性抽取
  • 算法拾遗二十五之暴力递归到动态规划五
  • Linux进程的创建结束类系统调用总结
  • Git分支的合并策略有哪些?Merge和Rebase有什么区别?关于Merge和Rebase的使用建议
  • 2022-2-23作业
  • 1.基于Label studio的训练数据标注指南:信息抽取(实体关系抽取)、文本分类等
  • “高退货率”标签引热议,亚马逊跨境电商是好是坏?
  • Pinia2
  • 服务器配置 | 在Windows本地打开服务器端Tensorboard结果
  • 13 nuxt3学习(新建页面 内置组件 assets 路由)
  • Linus命令记录(持续编辑版)
  • 玩转ThreadLocal
  • 亚马逊二审来袭,跨境电商传统验证算法真的靠谱吗?
  • 微信小程序|基于小程序+云开发制作一个租房小程序
  • 2.4 群辉驱动:多网口,系统网络只能识别两个网口 解决教程
  • Android正确使用资源res文件
  • 5分钟搭建第一个k8s集群
  • 【MySQL】查询操作(基础篇)
  • 工程管理系统+spring cloud 系统管理+java 系统设置+二次开发
  • MyBatisPlus Study Notes
  • 【Vu3 测试篇】自动化测试
  • Android system实战 — Android R(11) 第三方apk权限
  • 面试总结1
  • 【Hello Linux】程序地址空间
  • 电脑崩溃蓝屏问题如何重装系统