注意:本次登陆,前后端分离;前端通过引入第三方的js包,调用js包里的初始化方法和提交方法完成登陆以及退出;
流程1.引入第三方包
- 1.1在index.html文件下引入
流程2.完成初始化
- 在组件的created下完成初始化
问题2.1因为初始化的时候,必须传递后端分配的state,用作验证。
- 当时做了几种传递state的方式,方式1:前端到了login页面后先请求借口获取state的值,然后传递给初始化的state,发现行不通(确实初始化赋值上去了分配的state,但是登陆失败,后端说不支持);
流程3.拦截跳转:
- 最后采取方式2:前端在刚打开项目时候,路由是先进入 “/”,通过路由导航守卫进行拦截,如果是去路由 “/” 或者去“/login”,我就拦截住直接让页面跳到后端写的一个地址A,跳到这个地址A后,后端会帮我重定向到我本地的前端登录页(注意,一定要后端跳到本地的登录页,否则本地联调时候,监听不到你的路由变化,也没办法执行你登录页的操作),并且携带好state值;这样获取到的state的值,就可以用于初始化了;
- 先是路由进入’/’
- 主动拦截跳到后端地址,
- 后端定向到前端本地登录页,完成初始化
流程4.点击登录
- 同样登陆由于是js包需要配置,登录成功后,直接由后端重定向到前端本地的主页,并且携带上获取用户信息的sessionId。
- 根据路由导航,如果url是去主页且有获取用户信息的sessionId,那么就通过到主页;如果sessionId是错误,到主页后会被定向到登录页;登录成功后将sessionId储存在本地
流程5.配置拦截器:在marn.js中配置
- 每次访问时候,请求头上传递sessionId,后端做判断;
- 每次响应做拦截,判断登录状态是否有问题
// 配置axios的请求拦截器
axios.interceptors.request.use(
function(config) {
// 在发送请求之前做些什么
// console.log('请求到了哟', config.headers.Authorization)
// 统一的给config设置 token
config.headers.sessionId = JSON.parse(
localStorage.getItem("tokenSessionId")
);
return config;
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
//响应拦截器 与后端定义状态是100签名错误 跳转到登录界面
axios.interceptors.response.use(
function(response) {
// 对响应数据做点什么
console.log(response.data);
console.log(store);
console.log(router.currentRoute.query.sessionId);
//当返回信息为未登录或者登录失效的时候重定向为登录页面
if (response.data.success == 9) {
//{"data":“sessionId”,"message":"登录已过期,请重新登录","success":9}
localStorage.clear("tokenLoginUser");
localStorage.clear("tokenUserName");
localStorage.clear("tokenRoleCode");
localStorage.clear("tokenSessionId");
//走退出的功能(不能直接路由到登录页 会死循环)
message.warning(response.data.message);
setTimeout(() => {
window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${this.$route.query.sessionId}`;}, 2000);
tuichu2();
}
return response;
},
function(error) {
// 对响应错误做点什么
return Promise.reject(error);
}
流程6.退出登录
- 重置本地数据,调用后端退出的接口,传递登录用户的sessionId,后端做清除
tuichu() {
window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${this.$route.query.sessionId}`;
localStorage.clear("tokenLoginUser");
localStorage.clear("tokenUserName");
localStorage.clear("tokenRoleCode");
localStorage.clear("tokenSessionId");
this.$store.state.loginUser = "";
this.$store.state.userName = "";
this.$store.state.roleCode = "";
this.$store.state.windowCONTENT = "http://10.7.102.161:8082/aegis/";
this.$store.state.tabType = "myDistribution"; //标签页的类型控制v-if(项目)
this.$store.state.tabArr = [
{
name: "我的分发",
key: "myDistribution",
title: "我的分发",
type: "我的分发",
},
]; //标签页的数组
this.$store.state.tabKey = "myDistribution"; //标签页的key即点击打开了哪个
this.$store.state.menuKey = ["2"]; //侧边栏的默认打开key同时用来控制侧边栏的高亮
总结:本次登录是特殊的js包完成的,所以记录一下;
正常的登录可参考此篇文章,vue项目登录及token验证 vue-ant