vue 后台重定向不成功_vue 未登录或登录失效重定向到登录页,登录后再回到登录前的页面...

本文介绍了在Vue项目中实现后台重定向的详细步骤,包括:在路由配置中标记需要登录的页面,登录成功后存储用户信息,请求拦截器判断登录状态,main.js中判断用户是否已登录并进行相应重定向,以及Vuex中处理登录和登出操作。通过这些步骤,实现了未登录用户被重定向到登录页面,登录后返回之前试图访问的页面。
摘要由CSDN通过智能技术生成

实现思路:

1.router中给需要登录后才能访问的页面配置meta:{needLogin:true}

2.登录页面,调用登录接口成功后,给cookie中存入用户信息(我这里是存uuid和sessionid相关内容)

3.request.js的接口请求拦截器中,根据接口返回的code值判断用户是否登录或登录是否已失效(我这里是未登录和已失效code==1000),失效的话,将cookie中的用户信息移除

4. main.js中使用router.beforeEach,步骤1设置的需登录才能访问的页面中,通过判断cookie中是否有用户的uuid和sessionid信息,确定用户是否已登录(未登录时uuid信息肯定不存在,但登录失效时uuid是存在的,所以要在步骤3中通过判断code值,清除uuid新增)。当用户未登录时跳转到登录页,并将当前页面的重定向路径带到登录页面地址中

1.router index.js 配置哪些页面需要登录才能访问

2.main.js判断用户是否已登录(我用的cookie存储的用户信息,存储方法在auth.js里。)

import Vue from 'vue'

import * as auth from '@/utils/auth'

//判断是否登录

router.beforeEach(function(to, from, next) {if(to.meta.needLogin) {//从cookie中获取用户信息,判断是否已登录

if(auth.getAdminInfo().userUuid) {

next();//表示已经登录

} else{//未登录

//next可以传递一个路由对象作为参数 表示需要跳转到的页面

next({

name:"login",

query: {redirect: to.meta.redirect}//登录后再跳回此页面时要做的配置

});

}

}else{//表示不需要登录

next(); //继续往后走

}

});

3.auth.j

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值