Question

axios 拦截器的正确使用方法

2022-01-31

10213

javascript axios jwt

我想将 jwt 令牌添加到 Login.js 中的 axiosinstance，但它给出了错误

IDX12729: Unable to decode the header '[PII is hidden. For more details, see https://aka.ms/IdentityModel/PII.]' as Base64Url encoded ...]

这是我的代码：

Login.js

const printValues = e =>{

      axiosInstance.post('/auth', data)
.then(res =>{

  console.log("adding token");
  
  const config = axiosInstance.interceptors.request.use(function (config) {
    
    config.headers.Authorization =  res.data.token;

    return config;
  });

  axiosInstance.get('/User/GetUserByID/0', config)
  .then(res =>{
    //set user details
  })
  .catch(err =>{
    console.log(err);
  })
}

Answer 1

use 不会返回配置供您传递到请求中。只要您使用同一个实例，配置就会被更改。

  axiosInstance.interceptors.request.use(function (config) {
    
    config.headers.Authorization =  res.data.token;

    return config;
  });

  axiosInstance.get('/User/GetUserByID/0')
  .then(res =>{
    //set user details
  })
  .catch(err =>{
    console.log(err);
  })

Answer 2

首先，不要在响应处理程序中定义拦截器。这意味着每次发出该请求时，您都会添加一个拦截器。

通常，您会将令牌状态和拦截器与其他应用程序代码分开。无论您在哪里创建 axiosInstance 都是一个不错的选择。

例如...

import axios from "axios"

const axiosInstance = axios.create({
  // ..
})

const token = null // initial state

axiosInstance.interceptors.request.use(async config => {
  if (!token) {
    // note, use a separate axios instance for this request
    const { data } = await axios.post("/auth", dataFromSomewhere)
    token = data.token
  }

  config.headers.Authorization = `Bearer ${token}` // you may need "Bearer" here
  return config
})

现在，您可以使用 axiosInstance 发出请求，如果需要，它将在继续之前透明地解析您的授权令牌。

const printValues = e => {
  axiosInstance.get("/User/GetUserByID/0")
  .then(res =>{
    //set user details
  })
  .catch(err =>{
    console.log(err);
  })
}