uniapp 实现路由拦截,权限或者登录控制

背景:

  项目需要判断token,即是否登录,登录之后权限 

参考uni-app官方:

为了兼容其他端的跳转权限控制,uni-app并没有用vue router路由,而是内部实现一个类似此功能的钩子:拦截器,由其统一管理

拦截器说明:拦截器的适用场景非常多,比如路由拦截,权限引导等,所以可以采用拦截器来实现

uni.addInterceptor(STRING, OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.addInterceptor(STRING, OBJECT),uni.removeInterceptor(STRING)icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/api/interceptor.html#%E6%8B%A6%E6%88%AA%E5%99%A8%E7%9A%84%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%E9%9D%9E%E5%B8%B8%E5%A4%9A-%E6%AF%94%E5%A6%82%E8%B7%AF%E7%94%B1%E6%8B%A6%E6%88%AA-%E6%9D%83%E9%99%90%E5%BC%95%E5%AF%BC%E7%AD%89%E3%80%82

新建一个routeIntercept.js

调用uni.addInterceptor(),添加拦截,在main.js引入这个文件。那么在每一个跳转页面时,这个拦截()=>{}方法勾子就会被调用。

/*
* @Description: routeIntercept
* @Version: v1.0
* @Author: LANI
* @Date: 2024-01-27 13:01
*/
let needLogin = ["/pages/sys/login/index","/pages/sys/workbench/index",
]
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器console.log(item, 'router list item')uni.addInterceptor(item, {invoke(e) { // 调用前拦截//获取用户的tokenconsole.log(e, '|-调用前拦截,routerjs invoke')const token = localStorage.getItem('token')//获取当前页面路径(即url去掉"?"和"?"后的参数)console.log(token, '|-调用前拦截,如果token为空就拦截,不允许访问router index token')const url = e.url.split('?')[0]console.log(url, '|-调用前拦截,router index url')console.log(needLogin.includes(url))    if (needLogin.includes(url) && token == '') {uni.showToast({title: '请先登录',icon: 'none'})uni.navigateTo({url: "/pages/login/login"})return false}return true},fail(err) { // 失败回调拦截console.log(err);},})
})

main.js

在new Vue()之前引入上面的js

import '@/uview-ui/libs/router/routeIntercept.js';

页面进入时执行拦截器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/247331.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之CheckboxGroup组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之CheckboxGroup组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、CheckboxGroup组件 提供多选框组件,通常用于某选项的打开或关…

Apollo Cyber RT:引领实时操作系统在自动驾驶领域的创新

🎬 鸽芷咕:个人主页 🔥 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下…

【服务器】宝塔面板的使用手册

目录 🌷概述 🌼1. 绑定域名 🌼2. 添加端口 🌼3. 安装docker配置docker​​​​​​​ 🌼4. 软件商店 🌼5. 首页 🌷概述 宝塔面板的安装教程:【服务器】安装宝塔面板 &#x1f…

绘制太极图 - 使用 PyQt

大家好!今天我们将一起来探讨一下如何使用PyQt,这是一个强大的Python库,来绘制一个传统的太极图。这个图案代表着古老的阴阳哲学,而我们的代码将以大白话的方式向你揭示它的奥秘。 PyQt:是什么鬼? 首先&a…

Modelarts零代码体验,一键实现工地钢筋盘点,建筑提效新思维

前言 最近家附近的好几块地,同时在进行房产开发建设,早晚都能看到建筑师傅们在忙碌。 某天,夜跑中,发现前方的建筑工地,师傅们忙活的热火朝天,塔吊也在吊运钢筋中。 准备绕路的时候,旁边负责…

解锁创意无限:Adobe Photoshop 2023(PS2023)引领设计革命

Adobe Photoshop 2023 (PS2023),作为图像处理软件的翘楚,以其卓越的性能和无限的可能性,继续引领着数字创意设计的潮流。对于设计师、摄影师、艺术家以及那些对视觉效果有高要求的人们来说,PS2023无疑是他们的必备工具。 在PS202…

web前端项目-实现录音功能【附源码】

录音功能 运行效果&#xff1a;本项目可实现录音软件的录音、存储、播放等功能 HTML源码&#xff1a; &#xff08;1&#xff09;index.html&#xff1a; <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/h…

算法基础课-数据结构

单链表 题目链接&#xff1a;826. 单链表 - AcWing题库 思路&#xff1a;AcWing 826. 单链表---图解 - AcWing 需要注意的点在于理解ne[idx] head&#xff0c;idx表示当前的点&#xff0c;意思是将当前的点链到头结点的后面&#xff0c;再将头结点链在当前idx的前面。 #inc…

Qt|大小端数据转换

后面打算写Qt关于网络编程的博客&#xff0c;网络编程就绕不开字节流数据传输&#xff0c;字节流数据的传输一般是根据协议来定义对应的报文该如何组包&#xff0c;那这就必然牵扯到了大端字节序和小端字节序的问题了。不清楚的大小端的可以看一下相关资料&#xff1a;大小端模…

看图说话:Git图谱解读

很多新加入公司的同学在使用Git各类客户端管理代码的过程中对于Git图谱解读不太理解&#xff0c;我们常用的Git客户端是SourceTree&#xff0c;配合P4Merge进行冲突解决基本可以满足日常工作大部分需要。不同的Git客户端工具对图谱展示会有些许差异&#xff0c;以下是SourceTre…

[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别

【官方框架地址】 https://github.com/WongKinYiu/yolov7.git 【框架介绍】 Yolov7是一种目标检测算法&#xff0c;全称You Only Look Once version 7。它是继Yolov3和Yolov4之后的又一重要成果&#xff0c;是目标检测领域的一个重要里程碑。 Yolov7在算法结构上继承了其前…

【AcWing第140场周赛】AcWing 5461. 判断序列(A题)

文章目录 一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、时间复杂度3、代码详解 一、题目 1、原题链接 5461. 判断序列 2、题目描述 二、解题报告 1、思路分析 按照题目要求模拟即可。具体过程&#xff1a;设置一个变量来记录是否满足题目要求&#xff0c;检查…

虹科分享丨汽车技术的未来:Netropy如何测试和确保汽车以太网的性能

来源&#xff1a;艾特保IT 虹科分享丨汽车技术的未来&#xff1a;Netropy如何测试和确保汽车以太网的性能 原文链接&#xff1a;https://mp.weixin.qq.com/s/G8wihrzqpJJOx5i0o63fkA 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #汽车以太网 #车载网络 #Netropy …

SpringBoot常见错误

SpringBoot常见错误 1、SpringBoot启动时报错 错误: 找不到或无法加载主类 com.xxx.xxx.Application springboot启动时报错错误&#xff1a;找不到或无法加载主类 com.xxx.xxx.Application。 解决方法就是打开idea的控制台&#xff0c;输入以下三行命令&#xff1a; mvn cl…

Android发展历程及安装

目录 发展历程 下载网址 安装过程 发展历程 安卓基于Linux内核&#xff0c;Linux内核相当于房屋的地基 开源不等于免费&#xff0c;不能商用 安卓一般每半年小更新&#xff0c;一年大更新 对应API相当于别名 现在安卓安全性越来越高&#xff0c;性能越来越快&#xff0c…

2024.1.25 C++QT 作业

思维导图 练习题 1. 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void sh…

社交巨头之争:Facebook如何保持领先地位

社交媒体领域一直是激烈的竞争场地&#xff0c;而在这场竞争中&#xff0c;Facebook一直屹立不倒&#xff0c;保持着领先地位。究竟是什么让这个社交巨头在激烈的竞争中屡屡脱颖而出呢&#xff1f;本文将深入剖析&#xff0c;揭示Facebook如何通过创新、数据驱动、社会责任等关…

flink-java使用介绍,flink,java,DataStream API,DataSet API,ETL,设置 jobname

1、环境准备 文档&#xff1a;https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/ 仓库&#xff1a;https://github.com/apache/flink 下载&#xff1a;https://flink.apache.org/zh/downloads/ 下载指定版本&#xff1a;https://archive.apache.org/dist/flink…

Java项目:基于SSM框架实现的企业员工岗前培训管理系统(ssm+B/S架构+源码+数据库+毕业论文)

一、项目简介 本项目是一套ssm821基于ssm框架实现的企业员工岗前培训管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格…

深入解析HTTPS:安全机制全方位剖析

随着互联网的深入发展&#xff0c;网络传输中的数据安全性受到了前所未有的关注。HTTPS&#xff0c;作为HTTP的安全版本&#xff0c;为数据在客户端和服务器之间的传输提供了加密和身份验证&#xff0c;从而确保了数据的机密性、完整性和身份真实性。本文将详细探讨HTTPS背后的…