uniapp登录拦截器(未登录点击其他地方跳转登录页)

news2024/11/19 10:31:32

项目场景:

例如:客户要求用户在未登录的情况下,用户只可以在底部导航栏操作,点击其他的的功能都要跳转到登录页面。

uni.addInterceptor拦截器

是uni-app官网提供的拦截器,可以利用它来实现登录拦截器,用户在没有登录时是不能进行其他操作。链接   uni.addInterceptor(STRING, OBJECT) | uni-app官网 (dcloud.net.cn)

1.首先在根目录下新建一个文件夹(昵称任意)components。在components文件夹下建一个interceptor.js。

 2.在interceptor.js中写入

// 页面白名单,不受拦截
const whiteList = [
	'/pages/index/index',
	'/pages/class/class',
	'/pages/release/release',
	'/pages/mine/mine'
]
function hasPermission (url) {
	let islogin = uni.getStorageSync('isLogin');//在这可以使用token,isLogin是登录成功后在本地存储登录标识
	islogin = Boolean(Number(islogin));//返回布尔值
    // 在白名单中或有登录判断条件可以直接跳转
    if(whiteList.indexOf(url) !== -1 || islogin) {
		console.log('通过')
        return true
    }
	console.log('失败')
    return false
}
uni.addInterceptor('navigateTo', {
    // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/login/login'
            })
            return false
        }
        return true
    },
    success (e) {
		
    }
})
 
uni.addInterceptor('switchTab', {
    // tabbar页面跳转前进行拦截
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/login/login'
            })
			console.log('不在白名单内')
            return false
        }
		console.log('在白名单内')
        return true
    },
    success (e) {
		
    }
})

3.登录页面,登录成功时在本地存一个唯一标识符:“isLogin”

uni.setStorageSync('isLogin',1);//用于登录拦截判断

4.在main.js中引用。

import '@/components/Interceptor.js';//引入拦截

 这就可以实现一个简单的登录拦截器啦!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3+pinia+vuerouter4动态路由菜单

文章目录前言一、用户权限和菜单列表数据二、pinia存储数据状态共享1.创建存储用户详情的user.ts文件2.创建存储用户菜单和权限的menus.ts文件三、设置动态路由1.在router文件夹下面创建routers.ts文件2.设置前置路由守卫3.左侧导航菜单前言 最近在做一个通用后台管理系统的框架…

35.JavaScript对象和数组的解构赋值基础详解、let陷阱、函数参数解构

文章目录35.JavaScript对象和数组的解构赋值数组解构解构不改变原数组忽略数组元素可迭代对象使用解构赋值给任何变量与.entries()方法结合与Map结合变量交换多余的元素对象解构属性变量映射默认值多余的属性let陷阱多层解析函数参数解析总结35.JavaScript对象和数组的解构赋值…

HTML使用Element-UI制作管理系统页面(无需脚手架以及创建vue工程)

HTML正常使用Element-UI前言尝试经历设计附件前言 入职培训到Web前端后布置了一个制作管理系统前端页面的任务,任务要求包含: 1.页面的布局主要为左侧导航菜单栏,右侧为信息展示栏,要体现嵌套 2.点击菜单栏切换右侧信息展示时左侧…

前端在项目中使用mockjs模拟数据的增删改查

背景 在项目开发时,会存在前端界面已经画好了但是后端接口还在开发的情况,此时前端可以先根据接口文档明确自己需要的字段,然后使用mock模拟后端接口进行调试 安装 npm install mockjs 使用 1. 创建vue项目之后,新建一个mock…

基于SpringBoot的校园疫情防控系统设计与实现

1.概述 校园疫情防控系统的开发运用java技术、springboot框架,MIS的总体思想,以及Mysql等技术的支持下共同完成了该系统的开发,实现了校园疫情防控管理的信息化,使用户体验到校园疫情防控管理,管理员管理操作将更加方…

使用 el-table 实现树形数据懒加载、点击行展开、每次只展示一条数据(大类)以及自定义表格合计值

1. 使用 el-table 实现树形数据懒加载 实现必需条件: lazy :load“loadNode” :tree-props“{ children: ‘children’, hasChildren: ‘hasChildren’ }” 注意:特别是第3条,后端接口必须传给你"hasChildren"(名字可以不一样)…

Vue3的vue-router超详细使用

从零开始搭建Vue3环境(vitetsvue-router),手拉手做一个router项目搭建vue3环境vue-router入门(宝宝模式)vue-router基础(青年模式)一。动态路由匹配1.带参数的动态路由匹配2.捕获所有路由或404 …

uniapp项目中引入vant-Weapp(局部全局都有 史上最详细的方法)

1.先在根目录创建wxcomponents文件夹 2.打开 https://github.com/youzan/vant-weapp 下载最新的vant-Weapp 3.把我们下好的文件vant-weapp里面只留下dist其余的可以全部删掉,然后把vant-weapp放到 wxcomponents里面 4.在App.vue引入vant样式 import /wxcomponents…

蓝桥杯web开发-5道模拟题让你信心满满

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

最好的Vue组件库之Vuetify的入坑指南(持续更新中)

目录 安装Vuetify 文档结构 快速入门 特性 样式和动画 首先先声明,个人不是什么很牛逼的大佬,只是想向那些想入坑Vuetify的前端新手或者嫌文档太长不知如何入手的人提供一些浅显的建议而已,能让你们稍微少走一些弯路就是本文的目的。我其实也…

『从零开始学小程序』媒体组件video组件

👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟 🏡个人主页:starry陆离 🕒首发日期:2022年9月15日星期四 如果文章有帮到你的话记得点赞👍收藏💗支持一下哦 『…

Vue结合高德地图实现HTML写自定义信息弹窗

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息,弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗,可给出的大多数都是通过JS写HTML结构,我感觉这种不仅不好布局,而且可读性和维护性都不…

客户端会话跟踪技术 Cookie 浅谈

文章目录前言为什么之前浏览器和服务器不支持数据共享?会话跟踪技术Cookie的概念Cookie的工作流程Cookie的基本使用Cookie原理分析Cookie的存活时间Cookie存储中文前言 用户打开浏览器,第一次访问 Web 服务器资源时,会话建立,直到…

富文本编辑器Quill 介绍及在Vue中的使用方法

在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得。 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单、易上手特点&#x…

vue项目打包失败问题记录

项目"vue": "^2.7.14"版本 起因:项目里安装了openlayers最新版本的地图插件,打包会成功,但是打包页面会有红色提示 刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊,卸载,装了…

【WebSocket 协议】Web 通信的下一步进化

标题【手动狗头🐶】,大佬轻饶 目录一、什么是 WebSocket ?二、WebSocket 应用场景?三、代码中的 WebSocket四、一个完美的案例:在线聊天程序实现服务器chat/index.js实现客户端chat/index.htmlchat/style.css最终效果WebSocket 是基于单个 …

关于elementUI表单的清除验证以及复合型输入框

目录 一、清除表单的验证 问题的发生以及解决过程 代码 总结 二、复合型输入框——查询(前置和后置都有的) 问题的发生以及解决过程 代码 展示 一、清除表单的验证 问题的发生以及解决过程 表单弹窗关闭后再打开会出现上一次的验证信息提示&am…

JS中如何判断一个值是否为Null

前言 在鉴别JavaScript原始类型的时候我们会用到typeof操作符。Typeof操作符可用于字符串、数字、布尔和未定义类型。但是你运行typeof null时,结果是“object”(在逻辑上,你可以认为null是一个空的对象指针,所以结果为“object”)。 如何判…

Vue3【计算属性、Class绑定、Style绑定 、侦听器、表单输入绑定、模板引用、组件注册方式、组件嵌套关系 、组件注册方式】(三)-全面详解(学习总结---从入门到深化)

👏作者简介:大家好,我是小童,Java开发工程师,CSDN博客博主,Java领域新星创作者 📕系列专栏:前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…

一个小项目带你了解vue框架——TodoList(简单实用易上手)

写在前面 你是否还在为繁杂的事情感到头昏脑涨?你是否还在将便利贴贴满整个桌面?本文就为你解决这个烦恼,使用vue框架做一个TodoList,将事情整理的井井有条不再是一个遥不可及梦!让我们行动起来吧! 基于vue…