Vue.js 和 Axios - 在 401 上重定向

Posted 2023-02-22

【中文标题】Vue.js 和 Axios - 在 401 上重定向

【英文标题】：Vue.js and Axios - redirect on 401

【发布时间】：2019-02-05 08:41:49

【问题描述】：

我正在运行 Vue.js 和 axios 并尝试创建一个通用 API 对象，如下所示：

import router from './router'
import auth from './auth'
const axios = require('axios')

export const API = axios.create(
  baseURL: `https://my-api.com/`,
  headers: 
    Authorization: auth.getToken()
  
)

API.interceptors.response.use(null, function (error) 
  if (error.response.status === 401) 
    console.log('Failed to login')
    router.push('/Login')
  
  return Promise.reject(error)
)

每当收到401 错误代码时，我都会尝试将用户重定向到我的单页应用程序中的Login 屏幕。 但是我没有被重定向，我在 Chrome 中的开发者工具中也没有出现错误。我确实得到了console.log 和Failed to login。

【问题讨论】：

我猜状态码存储在error.response.status下。请尝试一下。

用error.response.status 和一些console.log 更新问题。

好的，那么也许可以发布您的 router.js 代码。拦截器对我来说看起来不错。

您可以发布您的router.js 文件吗？

见***.com/a/43175433/717267

【参考方案1】：

我发现了类似的情况。我已经修复了这段代码：

import router from 'router'
import store from 'store'
...
...
axios.interceptors.response.use(function (response) 
  return response
, function (error) 
  console.log(error.response.data)
  if (error.response.status === 401) 
    store.dispatch('logout')
    router.push('/login')
  
  return Promise.reject(error)
)

【讨论】：

这对我很有用，但 401 代码存在于 error.response.status 而不是 error.response.data.error.statusCode

【参考方案2】：

您可以执行以下操作：

axios.post("quote", params)
  .catch(function(error) 
    if (error.response && error.response.status === 401) 
      window.location.href = "logon";
     else 
      // Handle error however you want
    
  );

来源：https://github.com/axios/axios/issues/396#issuecomment-395592900

【参考方案3】：

您可以使用以下代码并将 httpClient.js 文件添加到您的项目中：

import axios from 'axios';
import 
  authHeader

from '../helper'

const baseUrl = 'http://localhost:8811/api/';//local-test
const Api_Path = `$baseUrl/`;

const httpClient = axios.create(
  baseURL: Api_Path,
  headers: 
    //Authorization: 'Bearer token',
    //timeout: 1000, // indicates, 1000ms ie. 1 second
    "Content-Type": "application/json",

  
)
const authInterceptor = (config) => 
  config.headers['Authorization'] = authHeader();
  return config;

const errorInterceptor = error => 


// check if it's a server error
  if (!error.response) 
    //notify.warn('Network/Server error');
    console.error('**Network/Server error');
    console.log(error.response);
    return Promise.reject(error);
  

  // all the other error responses
  switch (error.response.status) 
    case 400:
      console.error(error.response.status, error.message);
      //notify.warn('Nothing to display', 'Data Not Found');
      break;

    case 401: // authentication error, logout the user
      //notify.warn('Please login again', 'Session Expired');
      console.error(error.response.status, error.message);
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      //router.push('/auth');
      break;

default:
  console.error(error.response.status, error.message);
  //notify.error('Server Error');



 
  return Promise.reject(error);

httpClient.interceptors.request.use(authInterceptor);
httpClient.interceptors.response.use(responseInterceptor, errorInterceptor);

export default httpClient;

【讨论】：

与the other answer 相比，这一本质有何不同？两者都使用interceptors.response