在axios中怎樣新增授權驗證？

王铁柱6發表於2024-12-03
iOS

在 Axios 中新增授權驗證有多種方式，取決於你的後端使用的授權機制（例如，Bearer Tokens, Basic Auth, API Keys 等）。以下是一些常見方法：

1. 使用 headers 新增 Authorization 頭： 這是最常用的方法，特別是對於 Bearer Tokens。

import axios from 'axios';

const token = localStorage.getItem('token'); // 獲取儲存的 token

axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${token}`, // 在 Authorization header 中新增 Bearer token
  }
})
.then(response => {
  // 處理響應
})
.catch(error => {
  // 處理錯誤
});


//  或者，建立一個 Axios 例項以全域性配置授權頭：

const apiClient = axios.create({
  baseURL: '/api',
  headers: {
    Authorization: `Bearer ${token}`
  }
});

apiClient.get('/user')
.then(response => {
  // 處理響應
})
.catch(error => {
  // 處理錯誤
});

//  更靈活的方式，允許在每個請求中覆蓋全域性配置:
const apiClient = axios.create({
  baseURL: '/api',
});

apiClient.get('/user', {
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`, // 每次請求時動態獲取token
    }
})

2. 使用 auth 引數 (適用於 Basic Auth):

axios.get('/api/user', {
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
})
.then(response => {
  // 處理響應
})
.catch(error => {
  // 處理錯誤
});

3. 使用請求攔截器 (interceptors)： 攔截器可以在請求傳送前修改請求配置，例如新增授權頭。這對於需要在多個請求中新增相同授權資訊的情況非常有用。

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, function (error) {
  // 處理請求錯誤
  return Promise.reject(error);
});


//  更靈活的請求攔截器，允許根據不同請求新增不同的授權資訊：
axios.interceptors.request.use(config => {
    if (config.url === '/api/special_resource') {
        config.headers.Authorization = `ApiKey ${localStorage.getItem('apiKey')}`;
    } else {
        config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    }
    return config;
}, error => Promise.reject(error));

4. 使用 params (適用於 API Keys): 如果你的 API 使用 API Key 透過查詢引數進行身份驗證，你可以直接在 URL 中或使用 params 選項新增它。

// 直接在 URL 中新增
axios.get('/api/user?api_key=YOUR_API_KEY')

// 使用 params 選項
axios.get('/api/user', {
  params: {
    api_key: 'YOUR_API_KEY'
  }
})

選擇哪種方法取決於你的後端 API 的授權機制。 請查閱你的後端 API 文件，瞭解正確的授權方法和所需的引數。

重新整理 Token 的處理:

如果你的應用使用需要定期重新整理的 token，你可以在響應攔截器中處理 token 過期的情況：

axios.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) { // 檢查是否為 401 錯誤且未重試
      originalRequest._retry = true; // 標記已重試
      return refreshToken().then(newToken => { // 呼叫重新整理 token 的函式
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken; // 更新 token
        originalRequest.headers['Authorization'] = 'Bearer ' + newToken; // 更新原始請求的 token
        return axios(originalRequest); // 重新傳送請求
      });
    }
    return Promise.reject(error);
  }
);

//  refreshToken 函式示例 (你需要根據你的後端 API 實現具體的邏輯)
async function refreshToken() {
    const refreshToken = localStorage.getItem('refreshToken');

相關文章