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

若依vue版前端白名单处理

需求如下:需要直接访问系统某个界面并且不需要登录
找到permission.js文件

NProgress.configure({ showSpinner: false });const whiteList = ['/login', '/register'];router.beforeEach((to, from, next) => {NProgress.start()

在这个whiteList 添加界面的url就可以直接访问并且不需要登录(也就是白名单)
不过还需要注意的是填写的url不能是数据库的动态路由,所以我们要找到路由的js文件手动添加路由(该路由也不能跟动态路由重复)

也就是在router文件夹内的index.js文件,在公共路由内加入你的url。
下面是代码展示

permission.js

//实现能够存储正则表达式
const whiteList = ['/login', '/register', new RegExp('^/fygl/')];
。。。。。。。。。。。。。省略。。。。。。。。。。。。// 没有token// if (whiteList.indexOf(to.path) !== -1) {if (whiteList.some(whitelistItem => {if (typeof whitelistItem === 'string') {return to.path === whitelistItem;} else if (whitelistItem instanceof RegExp) {return whitelistItem.test(to.path);}return false;})) {// 在免登录白名单,直接进入next()} else {next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页NProgress.done()}

index.js

// 公共路由
export const constantRoutes = [//  path不能跟自动生成的path相同不然就不显示{path: '/fygl/hz/add',component: Layout,hidden: true,permissions: ['fygl:hz:list'],children: [{path: 'add',component: () => import('@/views/fygl/hz/add'),name: 'fygladd',meta: { title: '母婴传播消除工作主要指标统计添加', activeMenu: '/fygl/hz/add' }}]},

不过需要注意的是因为没有登录,所以左侧的导航栏是没权下查数据库的,所以可以在index.js中去掉 component: Layout,这样就直接展示界面而不展示导航栏了。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • php之 进行签名公钥、私钥(SHA1withRSA签名)
  • oracle(19c)用户管理
  • pytorch学习笔记3 tensor索引和切片
  • 如何使用哔哩哔哩下载与缓存视频?
  • 【无标题】图像增强技术:直方图均衡化、拉普拉斯算子、对数变换与伽马变换
  • Markdown语法学习
  • 同一台机器上,github多账号操作
  • HPC高性能计算平台
  • 体验 Whisper ,本地离线部署自己的 ASR 语音识别服务
  • 【第六章】测试理论与方法 - 灰盒测试的深入解析
  • SpringBoot 集成原生 Servlet、Filter、Listener
  • upload-labs漏洞靶场~文件上传漏洞
  • 【优秀python案例】基于python爬虫的深圳房价数据分析与可视化实现
  • Leetcode3227. 字符串元音游戏
  • 国产版Sora复现——智谱AI开源CogVideoX-2b 本地部署复现实践教程
  • [Vue CLI 3] 配置解析之 css.extract
  • 【React系列】如何构建React应用程序
  • Android 初级面试者拾遗(前台界面篇)之 Activity 和 Fragment
  • CSS实用技巧干货
  • extjs4学习之配置
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • jdbc就是这么简单
  • Linux下的乱码问题
  • rabbitmq延迟消息示例
  • React as a UI Runtime(五、列表)
  • session共享问题解决方案
  • SQLServer之索引简介
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 思维导图—你不知道的JavaScript中卷
  • 无服务器化是企业 IT 架构的未来吗?
  • 《码出高效》学习笔记与书中错误记录
  • ​​​​​​​开发面试“八股文”:助力还是阻力?
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ​secrets --- 生成管理密码的安全随机数​
  • ​批处理文件中的errorlevel用法
  • ​学习一下,什么是预包装食品?​
  • ###C语言程序设计-----C语言学习(6)#
  • #include
  • #pragma multi_compile #pragma shader_feature
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (C#)一个最简单的链表类
  • (CVPRW,2024)可学习的提示:遥感领域小样本语义分割
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (附源码)ssm码农论坛 毕业设计 231126
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • (接口自动化)Python3操作MySQL数据库
  • (四)Linux Shell编程——输入输出重定向
  • (转载)(官方)UE4--图像编程----着色器开发
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • **CI中自动类加载的用法总结
  • ../depcomp: line 571: exec: g++: not found
  • .NET Core6.0 MVC+layui+SqlSugar 简单增删改查
  • .Net CoreRabbitMQ消息存储可靠机制