重读vue电商网站26之路由导航守卫控制访问权限

简介: 重读vue电商网站26之路由导航守卫控制访问权限

如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面。

在之前的操作中,我们登录之后会种植一个 token 值,表示我们登录成功了,那么此时我们将 token 值去掉呢?

图片.png

直接点击上述 clear all 按钮去掉之后,我们依旧是可以访问 /home的路由,没有登录也能访问我们的后台主页,这肯定不是我们想要的结果。


在 router/index.js 中进行相关配置,具体如下,调用路由实例 router的 beforeEach方法,即可挂载我们的路由导航守卫


图片.png

  这里可能会有疑问,我们需要验证 token的正确性吗?

   答案是不需要,因为前端只需要管要不要给用户呈现这个页面,而我们调用api时,后端会对我们的 token 值进行校验,前端不需要验证

图片.png

退出功能


基于 token 的方式实现退出比较简单,只需要销毁本地的 token 即可。这样,后续的请求就不会携带 token ,必须重新登录生成一个新的 token 之后才可以访问页面。


那么,我们仅需要为退出按钮绑定一个事件即可。


然后事件内容就是:先清空 token,然后跳转到我们的登录页面。


核心代码如下:

图片.png

相关文章
|
缓存 JavaScript 搜索推荐
Vue Router 导航钩子的使用场景
【10月更文挑战第13天】
480 156
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
214 4
Vue实现按钮级别权限
|
JavaScript 搜索推荐 数据处理
Vue Router 导航钩子
【10月更文挑战第17天】需要注意的是,过度使用导航钩子可能会导致代码复杂度增加,因此需要合理规划和使用。此外,不同的钩子在不同的场景下具有不同的作用,需要深入理解其特点和用法,才能更好地发挥它们的价值。可以在实际项目中结合具体需求,充分利用这些导航钩子来打造更加智能、灵活的路由导航机制。
210 1
|
缓存 JavaScript 数据安全/隐私保护
Vue学习之--------路由守卫(2022/9/6)
这篇文章详细介绍了Vue路由守卫的概念和应用,包括全局守卫、独享守卫和组件内守卫的实现方法,并通过实际代码示例和测试效果展示了如何对路由进行权限控制,以及Vue路由器的两种工作模式:hash模式和history模式。
Vue学习之--------路由守卫(2022/9/6)
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种?分别有什么作用
Vue中的导航守卫有哪三种?分别有什么作用
|
JavaScript API 数据安全/隐私保护
vue尚品汇商城项目-day05【36.导航守卫理解】
vue尚品汇商城项目-day05【36.导航守卫理解】
129 0
|
JavaScript API
vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】
136 0
|
5月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
487 2
|
4月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
410 137
|
8月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
948 0