Question

我正在使用index.js文件在Vue应用程序中进行api调用。有没有一种方法可以在每次通话前添加一个catch或一个，以查看我的令牌是否仍然有效，如果不是令牌，则将用户重定向到登录名？

import axios from 'axios'

const client = axios.create({
   baseURL : 'http://myapi.com/api/',
    json: true
})

export default {
    async execute(method, resource, data) {
        const token = localStorage.getItem('token')
        return client({
          method,
          url: resource,
          data,
           crossdomain: true ,
          headers: { "Authorization": `Bearer ${token}` }
        }).then(req => {
          return req.data
        })
      },

      getResponses() {
        return this.execute('get', 'GetResponses')
      },

      getAll(){
        return this.execute('get', 'GetAll')
      },

Answer 1

您可以使用interceptor，在这里您可以在每个请求之前传递一个要调用的函数：

const client = axios.create({ baseURL: 'http://myapi.com/api/', json: true });

client.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');

  if (isTokenGood(token)) {
    return config;
  } else {
    logout();
  }
});

Answer 2

如果有人感兴趣，我最终会按照@thanksd的要求使用拦截器我的api文件夹中的代码index.js文件现在看起来像这样

import axios from 'axios'
import router from '../router'

const client = axios.create({
   baseURL : 'http://myapi.com/api/',
    json: true
})

client.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (error.response.status === 401) {
    router.push('/Login')
    console.info('auth token expired')
    localStorage.clear()
    sessionStorage.clear()
  } else if (error.response.status === 403) {
    router.push('/Login')
  } else {
    return Promise.reject(error)
  }
})

export default {
    async execute(method, resource, data) {
        const token = localStorage.getItem('token')
        return client({
          method,
          url: resource,
          data,
           crossdomain: true ,
          headers: { "Authorization": `Bearer ${token}` }
        }).then(req => {
          return req.data
        })
      },

      getResponses() {
        return this.execute('get', 'GetResponses')
      },

      getAll(){
        return this.execute('get', 'GetAll')
      },

在请求之前检查令牌是否仍然有效

2 个答案: