Vue axios获取token临时令牌封装案例


Posted in Javascript onSeptember 11, 2020

前言

为什么非要写这个博客呢?因为这件事让我有一种蛋蛋的优疼。剩下的都别问,反正问我也不会说。因为流程图我都不想(懒得)画。

开发架构

前端页面:Vue

网络请求:Axios;方式:vue add axios

缓存方案

全局变量:Vuex

本地缓存:LocalStorage

技术依赖

你猜?

背景

公司开发一个嵌入App的Web页面,安全方面使用老套路:App通过URL传参给前端(包含签名),前端把参数透传给H5后端验签,完事儿之后前端再决定用户是否合法。另外定义了N个JS方法前端根据固定GET参数判断是安卓还是苹果来调用。

初步设想

关于token设计方案的初步设想是这样的:第一次进入的时候获取token,后端检查签名是否通过。不通过则弹框请从合法途径进入页面并且不消失。

否则就可以让用户继续后续操作,直到后端返回token过期特定状态码回来前端在用户无感的情况下调用JS方法重新获取URL参数请求token,完事儿之后继续用户的请求操作。(为避免用户使用旧token在其他地方操作数据,每次获取token都重新从App中获取并验证,而不是在接口中刷新并返回新的token)

蛋疼事项

一期的时候定义URL参数时没有版本控制,导致二期新增JS方法迭代版本时前端新增页面调用了未知方法页面毫无反应;埋点数据也不知道是几期的…

为尽量避免请求过程中出现token过期导致的1次请求变3次请求现象每次调用请求之前需要先检查token时效的异步方法(如果token过期则调用getToken获取新的token并存储在本地)导致block嵌套。

后面又封装了N个方法就不说了…

升级设想

版本什么的这个先不说,就这个token问题我总不能每次新增一个请求就复制粘贴复制粘贴的吧?能烦死人!那我只能在axios请求之前判断token时效性啦。

直奔主题

函数声明

getToken:从本地取已存储token

checkToken:检查token时效,失效调用refreshToken函数成功则存储本地,否则返回错误原因

refreshToken:调用JS方法从App获取签名参数重新请求token

注意事项

在checkToken过程中token过期时,先移除本地已过期token缓存数据。

/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
"use strict";

import Vue from 'vue';
import axios from "axios";
import { getToken } from '../utils/storage.js'
import { checkToken, refreshToken, clearCache } from "../utils/utils.js";

// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post["Content-Type"] = "application/json";

let cancel,
 promiseArr = {};
let config = {
 baseURL: process.env.VUE_APP_BASE_URL,
 timeout: 8 * 1000, // Timeout
 withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
 function (config) {
  // Do something before request is sent
  let token = getToken();
  // alert("token1:" + token);
  //发起请求时,取消掉当前正在进行的相同请求
  if (promiseArr[config.url]) {
   promiseArr[config.url]("请稍后");
   promiseArr[config.url] = cancel;
  } else {
   promiseArr[config.url] = cancel;
  }
  if (token) {
   return checkToken(null)
     .then((result) => {
      // console.log("refreshToken result:", result);
      if (result === true) {
       token = getToken()
       // alert("token2:" + token);
       config.headers.common["authorization"] = token;
       return config;
      } else {
       return Promise.reject(Error(result))
      }
     }).catch((err) => {
      // 终止这个请求
      return Promise.reject(err);
     });
  }
  return config;
 },
 function (error) {
  // Do something with request error
  return Promise.reject(error);
 }
);

// Add a response interceptor
_axios.interceptors.response.use(
 function (response) {
  // Do something with response data
  let { status, statusText, data } = response;
  if (err_check(status, statusText, data) && data) {
   // var randomColor = `rgba(${parseInt(Math.random() * 255)},${parseInt(
   //  Math.random() * 255
   // )},${parseInt(Math.random() * 255)})`;

   // console.log(
   //  "%c┍------------------------------------------------------------------┑",
   //  `color:${randomColor};`
   // );
   // console.log("| 请求地址:", response.config.url);
   // console.log("| 请求参数:", response.config.data);
   // console.log("| 返回数据:", response.data);
   // console.log(
   //  "%c┕------------------------------------------------------------------┙",
   //  `color:${randomColor};`
   // );
   if (data.resCode === "0001") {
    clearCache()
    var config = response.config;
    var url = config.url;
    url = url.replace("/apis", "").replace(process.env.VUE_APP_BASE_URL, "")
    config.url = url;
    // alert(JSON.stringify(config))
    return refreshToken(null)
     .then((result) => {
      // console.log("refreshToken result:", result);
      if (result == true) {
       let token = getToken()
       if (token) {
        config.headers["authorization"] = token;
       }
       return axios(config)
        .then((result) => {
        let { status, statusText, data } = result;
        // console.log('接口二次请求 result:', result);
        if (err_check(status, statusText, data) && data) {
         return Promise.resolve(data)
        } else {
         return Promise.reject(Error(data.resDesc));
        }
       }).catch((err) => {
        // console.log('接口二次请求 err:' + err);
        return Promise.reject(err);
       });
      } else {
       // alert("result:" + result)
       return Promise.reject(Error(data.resDesc))
      }
     }).catch((err) => {
      // 终止这个请求
      // alert("终止这个请求:" + err.message)
      // console.log("refreshToken err:", err);
      return Promise.reject(err);
     });
   } else {
    return Promise.resolve(data);
   }
  } else {
   return Promise.reject(Error(statusText));
  }
  // return response;
 },
 function (error) {
  // Do something with response error
  // console.log("error", error);
  return Promise.reject(error);
 }
);

// eslint-disable-next-line no-unused-vars
const err_check = (code, message, data) => {
 if (code == 200) {
  return true;
 }
 return false;
};

Plugin.install = function (Vue, options) {
 Vue.axios = _axios;
 window.axios = _axios;
 Object.defineProperties(Vue.prototype, {
  axios: {
   get() {
    return _axios;
   }
  },
  $axios: {
   get() {
    return _axios;
   }
  },
 });
};

Vue.use(Plugin)
export default Plugin;

补充知识:vue+ axios+token 封装axios 封装接口url,带token请求,token失效刷新

一、封装axios

import axios from 'axios'
import qs from "qs" 
const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间
//axios.defaults.baseURL = 'http://localhost:8080'; 
 
// http request 拦截器
axios.interceptors.request.use(
  config => {
    if ($cookies.get("access_token")) { // 判断是否存在token,如果存在的话,则每个http header都加上token
      config.headers.Authorization ='Bearer '+ $cookies.get("access_token");
    }
    return config;
  },
  err => {
    return Promise.reject(err);
}); 
 
// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    console.log("response error :"+error);
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.log("token 过期");
          var config = error.config;
          refresh(config);
          return;
      }
    }
    return Promise.reject(error)  // 返回接口返回的错误信息
  });
/*
*刷新token
*/
function refresh(config){
  var refreshToken = $cookies.get("refresh_token");
  var grant_type = "refresh_token";
  axios({
    method: 'post',
    url: '/oauth/token',
    data: handleParams({"grant_type":grant_type,"refresh_token":refreshToken}),
    timeout: TIME_OUT_MS,
    headers: {}
  }).then(
    (result) => {
      if(result.data.access_token){  //重新保存token
        $cookies.set("access_token",result.data.access_token);
        $cookies.set("refresh_token",result.data.refresh_token);
        //需要重新执行
        axios(config);
      }else{ 
 
        //this.$events.emit('goto', 'login');
        window.location.reload();
      }
    }
  ).catch((error) => {
    //this.$events.emit('goto','login');
    window.location.reload();
  });
}
/*
* @param response 返回数据列表
*/
function handleResults (response) { 
 
  var result = {
    success: false,
    message: '',
    status: [],
    errorCode: '',
    data: {}
  }
  if (response.status == '200') {
    result.status = response.status;
    result.data = response.data;
    result.success = true;
  }
  return result
} 
 
// function handleUrl (url) {
//   //url = BASE_URL + url
//   url =root +url;
// // BASE_URL是接口的ip前缀,比如http:10.100.1.1:8989/
//   return url
// } 
 
/*
* @param data 参数列表
* @return
*/
function handleParams (data) {
  return qs.stringify(data);
} 
export default {
  /*
   * @param url
   * @param data
   * @param response 请求成功时的回调函数
   * @param exception 异常的回调函数
   */
  post (url, data, response, exception) {
    axios({
      method: 'post',
      //url: handleUrl(url),
      url: url,
      data: handleParams(data),
      timeout: TIME_OUT_MS,
      headers: {
        //'Content-Type': 'application/json; charset=UTF-8'
      }
    }).then(
      (result) => {
        response(handleResults(result))
      }
    ).catch(
      (error) => {
        if (exception) {
          exception(error)
        } else {
          console.log(error)
        }
      }
    )
  },
  /*
   * get 请求
   * @param url
   * @param response 请求成功时的回调函数
   * @param exception 异常的回调函数
   */
  get (url,data, response, exception) {
    axios({
      method: 'get',
      url: url,
      params:data,
      timeout: TIME_OUT_MS,
      headers: {
        'Content-Type': 'application/json; charset=UTF-8'
      }
    }).then(
      (result) => {
        response(handleResults(result))
      }
    ).catch(
      (error) => {
        console.log("error"+response);
        if (exception) {
          exception(error)
        } else {
          console.log(error)
        }
      }
    )
  }
}

二、配置axios 跨域,以及请求baseUrl

1.config-->index.js

'
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation. 
 
const path = require('path') 
 
//引入跨域配置
var proxyConfig = require('./proxyConfig') 
module.exports = {
  dev: { 
 
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //proxyTable: {}, //默认跨域配置为空
    proxyTable: proxyConfig.proxy, 
 
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8886, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 
 
    /**
     * Source Maps
     */ 
 
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map', 
 
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true, 
 
    cssSourceMap: true
  },
  
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // 项目名字改变时这里需要变化 原先为assetsPublicPath: '.'
    assetsPublicPath: './', 
 
    /**
     * Source Maps
     */ 
 
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map', 
 
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
 
 
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

2.config目录下创建一个文件 proxyConfig.js文件

module.exports={
  proxy:{
    '/':{ //将localhost:8081 映射为 /apis
      target:'http://localhost:8080',//接口地址
      changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
      secure:false, //如果接口是HTTPS接口,需要设置成true
      pathRewrite:{
        '^/':''
      }
    }
  }
}

三、封装API 请求Url port.js

export default {
  oauth: {
    login: '/oauth/token', // 登录
    logout: '/oauth/logout' // // 退出
  },
  user: {
    addUser: '/user/add',
    updateUser: '/user/update',
    getUser:'/user/', //+ Id
    exists:'/exists/', // +id
    enable:'/enable/', // +id
    disable:'/disable/', // +id
    delete:'/delete/',  //+id
    password:'/password ',
    query:'/query'
  }
}

四、main.js 引入

import http from './plugins/http.js'
import ports from './plugins/ports'
Vue.prototype.http = http
Vue.prototype.ports = ports

五、使用

login.vue中使用

login() {
  this.http.post(this.ports.oauth.login,{username:this.userId,
    password:this.password,grant_type:'password'}, res => {
    if (res.success) {
    // 返回正确的处理
    页面跳转
    this.$events.emit('goto', 'edit');
  } else {
    // 返回错误的处理
    //alert("等待处理");
  }
},err =>{
    //console.log("正在处理"+err.response.status);
    if(err.response.status=='400'){
      //显示用户名或密码错误
      this.$refs.username.focus();
      this.$refs.hint.click();
    }
  })
   
}

以上这篇Vue axios获取token临时令牌封装案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 #Javascript
You might like
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python自动化测试实例解析
2014/09/28 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL