vue中路由控制登陆不能随便跳转

ゞ浴缸里的玫瑰 2022-04-10 01:43 307阅读 0赞

需求: 如果不登录就不能随便操作路由  
比如说 [http://192.168.0.100][http_192.168.0.100] 打开登陆页面  
输入http://192.168.0.100 /\#/home 跳转到home页面  
所以必须控制路由,才能完成输入登陆页面成功跳转到home页面,而不是直接写一个home页面的链接就跳过来了  
配置基本步骤:  
1.需要在登陆页面配置  
当登陆成功后

if(res.data.success) {
    	sessionStorage.setItem('username',res.data.username) //需要后端返回 等同token
    	this.$router.push('/home' ) // 跳转
    }

2.需要在路由的indes.js配置  
代码如下:

// 设置路由的前置守卫（路由跳转之前）
    router.beforeEach((to, from, next) => {
       if (to.name == 'Login') {
        next();
       } else {
         // 判断sesstion里有没有username
         const username = sessionStorage.getItem('username');
         if (username) {
          next();
       } else {
          next({path: '/'})
         }
      }
    })

3.配置退出按钮

sessionStorage.clear(); // 删除sesstion数据
    this.$router.push({ path: "/" }); //跳转到登陆页面

在这里需要说明 sesstionStorage的生命周期,当关闭网页就消失了,  
此处用的是username 如果是token 需要再axios的拦截器中添加这一行代码,其他等同

// 在axios拦截器中添加 一般token是随着请求头
     if (config.url !== '/') {
       const token = sessionStorage.getItem('token');
        //  设置请求头
       config.headers.Authorization = token;
       }

还有的是利用vuex登陆的这个慢慢研究

[http_192.168.0.100]: http://192.168.0.100

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 多个路由路由跳转created不执行

问题今天做项目的时候发现，vue页面路由跳转的时候，created函数不执行。 created() { }, 解决办...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 18:16/ 0 赞/ 64 阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 45 阅读

相关 vue中的路由跳转方法，详细（vue路由跳转）

简述：Vue路由可以帮助你在单页应用中管理应用的不同页面和页面间的跳转，通过Vue路由，你可以实现页面的动态切换和无刷新加载，提升用户体验和页面性能，今天就来分享下Vue中路

痛定思痛。/ 2023年10月02日 23:42/ 0 赞/ 22 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 297 阅读

相关 vue中的路由跳转

https://blog.csdn.net/weixin\_42981560/article/details/94378469 ![在这里插入图片描述][watermark

绝地灬酷狼/ 2022年09月15日 11:45/ 0 赞/ 266 阅读

相关 vue中路由控制登陆不能随便跳转

需求: 如果不登录就不能随便操作路由比如说 [http://192.168.0.100][http_192.168.0.100] 打开登陆页面输入http://19

ゞ浴缸里的玫瑰/ 2022年04月10日 01:43/ 0 赞/ 308 阅读

相关 Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。 vue路由配置的步骤： https://router.vuejs.org/ 1.安

亦凉/ 2022年03月17日 05:17/ 0 赞/ 370 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 532 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 503 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 681 阅读