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

需求: 如果不登录就不能随便操作路由
比如说 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登陆的这个慢慢研究

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

猜你喜欢