微信网站设计欣赏,沈阳京科男科医院,Wordpress一写文章就卡了,有含义的公司名注意#xff1a;本次登陆#xff0c;前后端分离#xff1b;前端通过引入第三方的js包#xff0c;调用js包里的初始化方法和提交方法完成登陆以及退出#xff1b;
流程1.引入第三方包
1.1在index.html文件下引入 流程2.完成初始化
在组件的created下完成初始化 问题2.1因…注意本次登陆前后端分离前端通过引入第三方的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设置 tokenconfig.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?redirectUrlhttp://10.7.102.161:8082/localLogin/toLogin?type3-${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?redirectUrlhttp://10.7.102.161:8082/localLogin/toLogin?type3-${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
