Vue中登录验证成功后保存token,并每次请求携带并验证token操作


Posted in Javascript onSeptember 08, 2020

在vue中,可以用**Storage(sessionStorage,localStorage)**来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),

下面介绍用localStorage来存储:

在登录请求成功后,会返回一个token值,用loaclStorage保存

localStorage.setItem('token',res.data.token)

在main.js中设置全局请求头和响应回来的判断

//设置axios请求头加入token
Axios.interceptors.request.use(config => { 
 if (config.push === '/') { 
  } else { 
   if (localStorage.getItem('token')) { 
     //在请求头加入token,名字要和后端接收请求头的token名字一样 
     config.headers.token=localStorage.getItem('token');  
   } 
  } 
   return config; 
 }, 
 error => { 
  return Promise.reject(error);
 });

//=============================
//响应回来token是否过期
Axios.interceptors.response.use(response => { 
  console.log('响应回来:'+response.data.code) 
  //和后端token失效返回码约定403 
  if (response.data.code == 403) {
    // 引用elementui message提示框  
    ElementUI.Message({  
     message: '身份已失效', 
     type: 'err'  
     });
    //清除token 
    localStorage.removeItem('token ');
    //跳转  
    router.push({name: 'login'}); 
   } else { 
     return response 
   } 
  }, 
 error => { 
  return Promise.reject(error); 
  })

在router中的index设置全局守卫来判断是否存在token,不存在就返回登录页

router.beforeEach((to, from, next) => {
//to到哪儿 from从哪儿离开 next跳转 为空就是放行 
 if (to.path === '/') {
 //如果跳转为登录,就放行 
 next(); 
 } else {
 //取出localStorage判断
  let token = localStorage.getItem('token ');   
  if (token == null || token === '') { 
    console.log('请先登录')  
    next({name: 'login'});
   } else {
     next(); 
   } 
}});

补充知识:Vue获取并存储服务器返回的AuthorizationToken信息并给每次请求添加上token

由于后台是用jwt的token进行身份权限验证,后台在登录后把token添加响应头里,所以前台需要把这个token存放起来,并给每次请求的请求头添加上token,服务器才能获取token进行身份认证。

前台使用vue项目:

loging.vue(登录组件)

{
 submitForm(formName) {
 this.$axios
  .post('/api/admin/login', {
  userName: this.ruleForm.userName,
  password: this.ruleForm.password
  })
  .then(successResponse => {
  this.responseResult = JSON.stringify(successResponse.data)
  this.msg = JSON.stringify(successResponse.data.msg)
  if (successResponse.data.code === 200) {
  this.msg='';
  localStorage.setItem('userName',this.ruleForm.userName);
  //获取并存储服务器返回的AuthorizationToken信息
  var authorization=successResponse.headers['authorization'];
  localStorage.setItem('authorization',authorization);
  //登录成功跳转页面
  this.$router.push('/dashboard');
  
  }
  })
  .catch(failResponse => {})
 }
 }

main.js(全局配置js):

//自动给同一个vue项目的所有请求添加请求头
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

这里还需要考虑token过期失效的问题,博主将会在后续另写博客补充。

以上这篇Vue中登录验证成功后保存token,并每次请求携带并验证token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
浅析JavaScript 函数柯里化
Sep 08 #Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 #Javascript
JavaScript 事件代理需要注意的地方
Sep 08 #Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 #Javascript
详解JavaScript的this指向和绑定
Sep 08 #Javascript
vue点击按钮实现简单页面的切换
Sep 08 #Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 #Javascript
You might like
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php之readdir函数用法实例
2014/11/13 PHP
php绘制一个扇形的方法
2015/01/24 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python中文乱码的解决方法
2013/11/04 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python中的id()函数指的什么
2017/10/17 Python
分析Python中解析构建数据知识
2018/01/20 Python
python实现学生信息管理系统
2020/04/05 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
软件测试题目
2013/02/27 面试题
学子宴答谢词
2014/01/25 职场文书
党员岗位承诺书
2014/03/25 职场文书
企业消防安全责任书
2014/07/23 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
python区块链实现简版工作量证明
2022/05/25 Python