最近在项目开发中,遇到下面这样一个问题:
在进行数据请求之前,每个请求需要携带token, 但是token 有有效期,token 失效后需要换取新的token并继续请求。
需求分析
每个请求都需要携带 token ,所以我们可以使用 axios request 拦截器,在这里,我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
token 失效问题,当我们token 失效,我们服务端会返回一个特定的错误表示,比如 token invalid,但是我们不能在每个请求之后去做刷新 token 的操作呀,所以这里我们就用 axios response 拦截器,我们统一处理所有请求成功之后响应过来的数据,然后对特殊数据进行处理,其他的正常分发
功能实现
分析完问题后,我们来实现功能
安装axios, 这里我们就不再赘述怎么安装axios.
在 main.js 注册 axios
在 request 拦截器实现
axios.interceptors.request.use( config => { config.baseURL = '/api/' config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题 config.timeout = 2500 let token = sessionStorage.getItem('access_token') let csrf = store.getters.csrf if (token) { config.headers = { 'access-token': token, 'Content-Type': 'application/x-www-form-urlencoded' } } if (config.url === 'refresh') { config.headers = { 'refresh-token': sessionStorage.getItem('refresh_token'), 'Content-Type': 'application/x-www-form-urlencoded' } } return config }, error => { return Promise.reject(error) } )
在 response 拦截器实现
axios.interceptors.response.use( response => { // 定时刷新access-token if (!response.data.value && response.data.data.message === 'token invalid') { // 刷新token store.dispatch('refresh').then(response => { sessionStorage.setItem('access_token', response.data) }).catch(error => { throw new Error('token刷新' + error) }) } return response }, error => { return Promise.reject(error) } )
1、请求拦截器
请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。
axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么,例如加入token ....... return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });
2、响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。
axios.interceptors.response.use(function (response) { // 在接收响应做些什么,例如跳转到登录页 ...... return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
3、移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);