vue+axios 拦截器实现统一token的案例


Posted in Javascript onSeptember 11, 2020

需求

要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置 http response inteceptor ,当后端接口返回 401 Unauthorized(未授权) ,让用户重新登录。

通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。

代码如下:

const instance = axios.create({
 baseURL: 'http://www.laravel5.5.com/api/',
 timeout: 10000,
});

//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
instance.interceptors.request.use(config => {
//  // 设置以 form 表单的形式提交参数,如果以 JSON 的形式提交表单,可忽略
 if(config.method === 'post'){
  // JSON 转换为 FormData
  const formData = new FormData();
  Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))
  config.data = formData
 }
 // 下面会说在什么时候存储 token
 if (localStorage.token) {
  config.headers['Authorization'] = localStorage.token;
  config.headers['Accept'] = 'application/json';
  // config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  // store.dispatch('logined', localStorage.token)
 }
 return config
},error =>{
 alert("错误的传参", 'fail')
 return Promise.reject(error)
})

// 自定义的 axios 响应拦截器
instance.interceptors.response.use((response) => {
 // 判断一下响应中是否有 token,如果有就直接使用此 token 替换掉本地的 token。你可以根据你的业务需求自己编写更新 token 的逻辑
 var token = response.headers.authorization;

 if (token) {
  // 如果 header 中存在 token,那么触发 refreshToken 方法,替换本地的 token
  axios.defaults.headers.common['Authorization'] = token;
 }
 return response
}, (error) => {
 if (error.response) {
  switch (error.response.status) {
   case 401:
    // 这里写清除token的代码
    router.replace({
     path: 'login',
     query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
    })
  }
 }
 return Promise.reject(error)
});
Vue.http = Vue.prototype.$http = instance;

简单的分享一下自己的代码;这是本人结合JWT-Auth定制的axios拦截,

1.根据用户是否登陆,查看用户请求头是否携带token

2.根据判断后台响应值headers是否携带Authorization值,如果存在,刷新Token

3.如果用户授权失败,直接跳至登陆页面

补充知识:vue封装axios(统一添加请求参数,如token useId等)

main.js中:

import axios from 'axios'
import VueAxios from 'vue-axios'
import qs from 'qs';
Vue.prototype.$qs = qs;
 
//请求的拦截器
/*axios.defaults.transformRequest=[function(data){
 return qs.stringify(data);
}];*/
axios.interceptors.request.use(function(config){
 const cl_u_id=localStorage.getItem('cl_u_id');
 const appId=localStorage.getItem('appId');
 
 if(config.headers['Content-Type'] == 'multipart/form-data'){
  config.data.set('cl_u_id',cl_u_id);
  config.data.set('appId',appId);
  return config;
 }
 //判断请求的类型:如果是post请求就把默认参数拼到data里面;如果是get请求就拼到params里面
 if(config.method==='post'){
  config.data=qs.stringify({
   cl_u_id:cl_u_id,
   appId:appId,
   ...config.data
  })
 }else if(config.method==='get'){
  config.params={
   cl_u_id:cl_u_id,
   appId:appId,
   ...config.params
  }
 }
 return config;
},function(error){
 return Promise.reject(error);
}) 
Vue.use(VueAxios, axios)

vue+axios 拦截器实现统一token的案例

以上这篇vue+axios 拦截器实现统一token的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
Ajax实现异步加载数据
Nov 17 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 #Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 #Javascript
vue 子组件和父组件传值的示例
Sep 11 #Javascript
jQuery实现朋友圈查看图片
Sep 11 #jQuery
详解webpack的文件监听实现(热更新)
Sep 11 #Javascript
js代码编写无缝轮播图
Sep 13 #Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 #Javascript
You might like
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
python统计cpu利用率的方法
2015/06/02 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
公务员政审个人总结
2015/02/12 职场文书
2015年实习单位评语
2015/03/25 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
复兴之路展览观后感
2015/06/02 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL