vue-element-admin 如何正确使用登录拦截设置白名单

最新推荐文章于 2024-10-09 21:45:10 发布
最新推荐文章于 2024-10-09 21:45:10 发布
阅读量546 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73863618/article/details/129789705
版权

用途：
在vue中我们一般把登录拦截及权限处理在permision.js文件中并在min.js中导入；

 

当页面跳转时判断用户是否登录及token是否过期，若token过期/未登录则会重定向到login页面；

但有些项目除了登录页还有用户注册页面，此时需要设置白名单使得可以直接从login页面跳转至regist页面而不会被重定向到login 。以下是使用代码 。我把404和登陆页面放入白名单再进行逻辑处理

W.j78
关注
SpringBoot实践（二十六）：Security实现Vue-Element-Admin登录拦截(适合单体应用)
叶子叶来
07-29 1095
之前研究时候用mock.js和模拟登录接口完成Vue-Element-Admin的登录，生产很多场景会使用SpringSecurity框架，因为它功能较多，文档写的不错，所以现在使用真实的场景实现集成，security使用系列的过滤链完成请求的过滤和自定义，直接处理的是HttpServletResponse和HttpServletRequest对象。......
Vue和Vue-Element-Admin（四）：vue-element-admin的用户登录集成
叶子叶来
11-20 1万+
Vue-element-admin使用mock.js数据进行用户和权限的验证，使用该框架开发的首要事情就是用户集成改造，使用本地测试环境的用户和角色信息完成登录验证；github地址：https://github.com/yezonggang/testspring
Vue添加白名单
最新发布
Diyu0904的博客
10-09 295
vue项目配置白名单
小月月
07-20 9458
vue项目配置白名单 前提是已经写好存储登录token相关的编码 为了防止我们的h5页面访问路径被直接篡改 ，没有通过login登录页面进入我们的系统，这时候就需要配置白名单了。 1 在main.js 文件中 定义白名单 const whiteList = ['/login']// 按需定义修改 2.在main.js 文件中进行逻辑判断 判断页面是否有存储 token 如果已经存储 则跳转主页面，如果没有存储的token信息，则跳登录login页面。 **token信息是后台返回过来的 前端需
若依vue添加访问白名单，免登录访问指定路由页面
Still_and_silent的博客
04-29 3168
若依vue添加访问白名单，免登录访问指定路由页面
vue-element-admin 登录拦截设置白名单
yueye_wu的博客
05-27 2499
vue-element-admin 登录拦截设置白名单
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
Vue Element Admin 的官方网站（elementadmin官网）提供了详细的文档和示例，帮助开发者快速理解和上手。在学习和使用过程中，可以参考以下知识点： - **Vue基础知识**：理解Vue的基本概念，如组件、指令、计算属性...
tp6-vue-admin:基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案
05-02
#注意3：开发环境，如果使用代理，解决跨域问题，接口地址在 vue.config.js 设置代理proxy，转到 ，.env.development中的VUE_APP_BASE_API 设置空即可。 #注意4：如果只运行vue-admin前端，则可以把代理转到 #注意5...
my-vue-iview-admin:使用vue和iview实现vue-element-admin
04-05
《基于Vue和iView构建的my-vue-iview-admin详解》 在现代Web开发领域，Vue.js作为一款轻量级、高性能的前端框架，深受开发者喜爱。它以组件化为核心，提供了丰富的生态和易用的API，使得构建复杂前端应用变得简单。...
vue-element-admin开发后台权限模块
06-29
element-admin实现的后台权限验证系统，解决在前后端分离场景下如何实现前端菜单访问的动态权限以及如何在脚手架中进行接口的封装调用，您将学习到如下知识： 1、学习如何使用后台集成框架vue-element-admin进行...
vue路由白名单
偷得浮生半日闲
11-01 5723
例如：网页中有些页面需要登录后才能访问，有些页面不需要，我们需要在页面的前置路由设置白名单，过滤出白名单（不需要登录就可以访问的页面），判断是否需要登录，如果是，就跳到登录页面。
vue-admin-template——添加页面跳转白名单——基础积累
yehaocheng520的博客
12-25 1762
vue-admin-template框架，添加页面白名单的功能
Vue请求拦截白名单实现方法
ByteSparkX的博客
09-24 535
在白名单中的URL将不会被拦截，可以直接发送请求，而其他URL则会经过拦截器的处理逻辑。接下来，我们需要定义一个请求拦截器，在拦截器中进行请求白名单的判断。如果URL在白名单中，我们将直接返回请求，不进行拦截。否则，我们可以在拦截器中添加自定义的处理逻辑。首先，我们需要安装axios库，它是一个常用的HTTP请求库，方便我们发送请求和进行拦截处理。否则，我们可以在拦截器中添加自己的处理逻辑，例如在请求头中添加认证信息等。数组定义了需要例外处理的URL，如果请求的URL在白名单中，我们直接返回请求配置。
vue token过期后的处理和网关白名单
qq_42434039的博客
10-28 462
如果返回401，token过期，就消除token。然后刷新就会跳转登录。判断是否登录，已经登陆则获取getinfo。设置让他自己跳到登录，不用刷新。
Vue/ Vue 全局路由守卫 前置路由守卫 （beforeEach） 后置路由守卫（afterEach）、搭配白名单使用方法
m0_64494670的博客
11-24 1124
Vue/ Vue 全局路由守卫 前置路由守卫 （beforeEach） 后置路由守卫（afterEach）、搭配白名单使用方法
若依vue版前端白名单处理
CodeTom的博客
08-05 3090
不过需要注意的是因为没有登录，所以左侧的导航栏是没权下查数据库的，所以可以在index.js中去掉 component: Layout,这样就直接展示界面而不展示导航栏了。不过还需要注意的是填写的url不能是数据库的动态路由，所以我们要找到路由的js文件手动添加路由（该路由也不能跟动态路由重复）在这个whiteList 添加界面的url就可以直接访问并且不需要登录（也就是白名单）也就是在router文件夹内的index.js文件，在公共路由内加入你的url。找到permission.js文件。
Vue3 ElementPlus Admin
热门推荐
田兴的博客
06-03 2万+
Vue3 Element Plus Admin 开箱即用的后管理系统。它基于vue3和element plus 实现。内置了动态路由，i18n国际化，动态权限菜单等功能 ✅ 功能 - 登录 / 注销 - 动态路由 - 动态侧边栏（支持多级路由嵌套） - 动态面包屑 - 快捷导航(标签页) - 本地/后端 mock 数据 - 組件 - 富文本 - Markdown(未完成) - 表格 - 动态表格 - 综合表格 - 错误页面 - 401 - 404 - ECharts 图表 - Cl
基于element-plus-admin实际开发记录（一）element-plus-admin登录
qq_36873710的博客
06-09 7331
采用element-plus-admin进行开发学习，GitHub地址 该框架使用技术： ES2015+、vue-next、typescript、vite、postcss 和 element-plus
vue-element-plus-admin修改了动态路由后登录显示404的问题
2301_81030084的博客
05-22 671
最近开发的时候使用vue-element-plus-admin mini分支这个后台模板，分享一个404解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值