Vue项目中常见问题(52)导航守卫的判断与用户登录操作

最新推荐文章于 2024-05-12 18:19:52 发布
最新推荐文章于 2024-05-12 18:19:52 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js 前端 html javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124939834
版权
本文详细介绍了在Vue项目中如何使用导航守卫防止已登录用户返回登录页面。通过全局前置守卫实现路由跳转判断，根据store中的token判断用户登录状态，若token失效则清理并重新登录。此外，还讨论了刷新页面后用户信息丢失的问题及解决方案。
摘要由CSDN通过智能技术生成

目录

问题1:用户已经登录了,用户就不应该还能回到login页面

解决方法:导航守卫

那么什么是导航守卫呢?

举例子:方便理解记忆

全局守卫:你的项目当中,只要发生路由变化,守卫就能监听到

 项目中的应用:

 解决问题1:

问题1:用户已经登录了,用户就不应该还能回到login页面

所以路由的跳转不是你想怎么跳就怎么跳的

解决方法:导航守卫

那么什么是导航守卫呢?

我们去到vue的官网中:导航守卫 | Vue Router

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

举例子:方便理解记忆

导航守卫:

导航:表示路由正在发生改变,进行路由跳转

守卫:你把它当做'紫禁城护卫'

全局守卫:

举例子: 紫禁城[皇帝、太后、妃子]，紫禁城大门守卫全要排查

路由独享守卫:

举例子:紫禁城[皇帝、太后、妃子]，是相应的[皇帝、太后、妃子]路上的守卫

组件内守卫: 你去皇帝屋子

举例子:比如你已经到皇帝屋子外面了(或者进去了) 这块区域的守卫

全局守卫:你的项目当中,只要发生路由变化,守卫就能监听到

分为:全局前置守卫、全局解析守卫、全局后置守卫，说白了就是执行的时间不同

全局前置守卫:跳转之前

全局后置守卫:跳转之后

最低0.47元/天 解锁文章
学无止境QAQ
关注
专栏目录
vue路由守卫+登录态管理实例分析
10-16
主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下
vue 利用路由守卫判断是否登录的方法
10-17
今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router(路由守卫)
最新发布
m0_74641039的博客
05-12 221
位置：在src/router/index.js文件中配置。 作用：对任何路由跳转（包括首次加载、手动导航、编程式导航）进行统一拦截。 后置路由守卫 全局后置钩子 (router.afterEach): 位置：同样在src/router/index.js文件中配置。 作用：在每次路由切换成功后执行，通常用于更新页面标题、埋点统计、页面缓存清理等工作，不涉及阻断路由访问。 路由独享守卫(beforeEnter) 位置：在定义路由配置对象时，直接在目标路由的配置内设置。 作用：仅对特定路由生效，执行特定的权限检查
路由守卫（登录_vue3）
m0_57002951的博客
08-11 2149
可以监控所有的路由跳转，并做一些相应的操作 实现功能： 不管你在哪个页面，只要没有登陆，就自动跳转到登陆页面
vue3中路由守卫的快速上手
2301_78646673的博客
01-09 1580
路由守卫或者说路由拦截，在我们实际开发前端项目中是经常用到的操作；通过路由守卫，可以在用户访问某个路由之前进行权限验证。（全局前置守卫）例如，可以检查用户是否登录，是否具有访问该路由的权限，如果不满足条件，则可以将用户重定向到其他页面或显示相应的提示信息。
后台管理系统-登录/退出功能
weixin_48912846的博客
04-20 1599
登录功能实现 路由导航守卫控制访问权限 如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登陆页面。 // 为路由对象，添加 beforeEach 导航守卫 // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next router.before((to,from,next) => { // 如果用户访问的登录页，直接放行 if （to.path === '/login'） return next() // 从 sessionStorage 中获取
Vue项目中常见问题(50)登录业务(token)与业务中存在的问题
qq_46368050的博客
05-24 1165
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求1: 1.找到登录的组件的对应结构 收集表单信息 2.写接口api 3.找到user仓库,写action 4.组件中派发action 5.token出现 业务需求2: 1.书写api 2.仓库store中书写三连环 3.把token带给服务器拿到数据 4.仓库中存储数据继续三连环 5.数据展示在页面 git...
token过期时刷新页面重复提示vue
aqeerqwuyrqr的博客
03-18 1502
1.问题描述 由于axios调用是异步执行的，刷新页面后，页面所有请求几乎同时触发，然后这些请求的响应就会被陆续返回。响应会被response拦截器处理 2.解决方法 在全局变量文件中global.js，增加token无效标记，代码如下： export default { // token无效标记 TokenInvalidFlag : 0 } 修改拦截器代码： instance.interceptors.response.use(response => { if (response) { switch
关于路由守卫next()
MR.杜的博客
05-19 2689
动态注册的路由，对当次路由跳转不可见，后面的路由跳转都可见 next():放行当前路由跳转 => 看不见刚才动态注册的权限路由（vue-element-admin潘家陈后台项目模板做路由权限，动态店家路由会出现页面留白bug） next(to.path) : 强制重新跳转到目标路由（中断当前路由跳转，进行新的一次跳转） //路由全局前置守卫 router.beforeEach(async(to, from, next) => { NProgress.start() do.
vue路由守卫判断用户是否登录，如果没登陆就跳转到登录
weixin_44302838的博客
08-19 1535
router.beforeEach((to, from, next) => {//路由跳转中 const nextRoute = ['About'];//将所有需要登陆才显示的页面的路由都放进一个数组，我这里是about页面 // 开启进度条 NProgress.start() if(nextRoute.indexOf(to.name) >= 0) { //判断要进入的页面路由是否需要登录才能进入,如果是就判断登录状态 if (getToken()) {//如果登录
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
10-15
在本例中，我们将讨论如何利用全局导航守卫实现登录后跳转到用户登录前尝试访问的特定页面。 全局导航守卫是 Vue Router 提供的一种机制，允许我们在路由发生改变时执行预定义的函数，从而实现对路由切换的控制。在...
vue面试题-路由守卫 / 导航守卫
02-03
以上知识点涵盖了Vue.js在实际项目中的一些核心概念和常见操作，对于理解和解答面试问题非常有帮助。在移动端项目和小程序功能点的考察中，可能还会涉及组件化开发、状态管理、网络请求优化、性能优化等方面的问题。
Vue登录拦截 登录后继续跳转指定页面的操作
10-14
在实际应用中，这个函数可能需要与后端API交互，或者利用Vue的store状态管理来获取用户登录状态。 在登录页面`login.vue`中，当用户成功登录后，我们需要根据登录前的页面（来源页面）来决定跳转的方向。这里可以...
vue项目前端埋点的实现
10-17
在Vue项目中实现前端埋点是一项关键任务，用于收集用户行为数据，以便分析用户交互、优化用户体验和制定营销策略。本文将深入探讨两种常见的前端埋点技术：命令式埋点和声明式埋点，并结合Vue的自定义指令和路由拦截...
vue项目实现设置根据路由高亮对应的菜单项操作
10-14
在Vue项目中，实现根据路由高亮对应的菜单项是一项基本但重要的功能，它能够帮助用户更好地理解当前所处的页面位置。下面将详细介绍两种常见的实现方法。 首先，我们可以使用Vue Router提供的`router-link`组件来...
Vue3的路由守卫以及登录状态储存
qq_51179608的博客
05-06 2899
Vue3的路由守卫以及登录状态储存
[Vue2] 面试基础
959
01-31 1221
文章目录1. Vue-Router 的懒加载如何实现2. 路由的hash和history模式的区别3. 如何获取页面的hash变化4. route和route 和route和router 的区别 1. Vue-Router 的懒加载如何实现 非懒加载： import List from '@/components/list.vue' const router = new VueRouter({ routes: [ { path: '/list', component: List } ] })
Vue路由守卫的设置
weixin_44962939的博客
06-10 313
1、路由守卫的创建 router.beforeEach((to,from,next) => { //1.如果用户访问/login的请求,应该直接放行 if(to.path === ‘/login’) return next() //2.不是访问的登录页面,所以判断用户是否登录. 判断依据token let token = window.sessionStorage.getItem(“token”) //3.如果!token 没有值,则执行if之后的操作 if(!token) return nex
配置不同环境路由 vue-cli代理服务器解决跨域 将token存储到vuex中 请求拦截器设置统一token cookies持久化存储token 路由守卫-路由跳转进度条
weixin_68531033的博客
06-17 743
设置开发环境和生产环境请求基地址.env.devlopment开发环境 .env.production 生产环境的基地址 使用环境变量 修改端口号port :'8888' 修改端口号后要重启终端ip和端口开启终端未结束 开启另一个会造成端口占用问题跨域产生的条件不同源http协议 ip地址 端口号如何解决跨域问题代理服务器解决跨域问题当前端口号为8888目标端口号为3000 启用代理服务器端口号为当前端口号 通过代理服务器转换成目标端口号 服务器与代理服务器不存在跨域问题 在vue.
怎么实现vue路由守卫判断是否登录
04-05
可以使用vue-router提供的路由守卫实现判断用户是否登录。具体步骤如下： 1. 在router.js文件中导入需要使用的路由守卫，如beforeEach。 2. 在需要进行登录验证的路由组件中添加meta字段，用于标记该路由需要进行登录验证。 3. 在router.js文件中使用beforeEach路由守卫，判断用户是否登录，如果已登录则放行，否则跳转到登录页面。 以下是示例代码： router.js ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'home', component: () => import('@/views/Home.vue') }, { path: '/login', name: 'login', component: () => import('@/views/Login.vue') }, { path: '/profile', name: 'profile', component: () => import('@/views/Profile.vue'), meta: { requireAuth: true // 标记该路由需要登录验证 } } ] }) router.beforeEach((to, from, next) => { // 判断该路由是否需要登录验证 if (to.matched.some(record => record.meta.requireAuth)) { // 判断用户是否已登录 if (!isLogin()) { // 未登录，跳转到登录页面 next({ name: 'login' }) } else { // 已登录，放行 next() } } else { // 不需要登录验证，放行 next() } }) // 判断用户是否已登录 function isLogin () { // 判断用户是否已登录的逻辑 } export default router ``` Profile.vue ``` <template> <div> <h1>Profile</h1> </div> </template> <script> export default { name: 'Profile' } </script> ``` Login.vue ``` <template> <div> <h1>Login</h1> </div> </template> <script> export default { name: 'Login' } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值