vue-cli3项目通过vue如何引入第三方js包完成登陆功能
注意:本次登陆,前后端分离;前端通过引入第三方的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?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
vue-cli3项目通过vue如何引入第三方js包完成登陆功能相关推荐
- VUE 引入第三方js包 及调用
1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js ...
- vue3+ts引入第三方js包,避免关键字报错
项目要使用第三方包leaflet 在入口文件index.html中引入之后,使用的时候ts检查时关键字L就会报错 第一种方法 用 ** //@ts-ignore**,在用了L关键字的每一行上面加这个 ...
- Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置 配置优化 一.js文件最小化处理 二.分割代码 三.图片资源压缩 四.开启gzip压缩 先看一下优化配置之前的文件大小 通过vue-cli3脚 ...
- vue引入第三方js的方案 报错
vue引入第三方js的方案 报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载 所以只能通过外部引用 使用方法如下: 1.首先是第三方js包存放的位置 一定要放在 st ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- Vue cli 引入第三方JS和CSS的常用方法
如果要引入第三方JS或者css 最好是把文件放在statis文件夹下,此处是静态文件存放的位置 第一种方法: 直接在index.html中引入 js <script type="te ...
- uni-app 项目引入第三方js插件,单个js文件引入成功,调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上 方法一: 引用网址:https://www.cnblogs. ...
- android.mk 添加v7_Android.mk引入第三方jar包和so库文件的方法
以SystemUI为例,如果需要在SystemUI中引入第三方jar包以及so库,可作如下处理: 首先,在frameworks\base\packages\SystemUI下新建libs目录: 将需要 ...
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案 参考文章: (1)vue-cli项目中单文件组件引入bootstrap.js异常的解决方案 (2)https://www.cn ...
最新文章
- AJAX服务器返回数据 连接数据库查询数据
- 第三章:lambda表达式
- 网站自动登录功能的设计
- 7张图揭晓RocketMQ存储设计的精髓
- C语言中side的用法,C语言 side effect和sequence point
- python调用c++类内静态函数_Python与C++混合编程 - 2.4 - 使用局部静态对象
- [CQOI2014]通配符匹配
- Linux下的“句柄”(文件句柄,窗口句柄)
- 多个ai文件合并成pdf_AI打开多页PDF教程.pdf
- 去除加粗的css,css如何取消加粗
- CF506C Mr. Kitayuta vs. Bamboos
- 一文读懂支付通道背后的江湖!——下
- 阿里云服务器被流量攻击怎么办
- GitHub 上值得收藏的 100 个精选前端项目!
- sql中下划线的转义
- 视在功率、功率因数、额定功率的初步了解
- java版本+企业电子招标采购系统源码+项目模块功能清单+spring cloud +spring boot
- 前端架构之一浅谈前后端分离
- android人脸识别应用架构,基于Android平台人脸识别系统的设计与实现
- Android三种方式截取任意界面屏幕
热门文章
- cayenne:用于随机模拟的Python包
- 458. 可怜的小猪
- leetcode 1269. 停在原地的方案数(dp)
- leetcode116. 填充每个节点的下一个右侧节点指针(dfs)
- 程序员实际情况_程序员实际上是做什么的?
- 开源 非开源_开源为善
- pandas:根据行间差值进行数据合并
- python 2 days
- 零基础逆向工程24_C++_01_类_this指针_继承本质_多层继承
- BZOJ 2160 拉拉队排练