How to use an Axios interceptor with Next- Auth

在使用Next.js开发应用时，Next-Auth提供了一种简便的方式来处理身份验证。而Axios是一个流行的HTTP客户端，其拦截器功能允许我们在请求发送前后对其进行处理，这对于处理身份验证令牌特别有用。

使用Axios拦截器处理Next-Auth令牌的步骤

1. 安装必要的依赖

首先，确保你的项目中已经安装了next-auth和axios。

bash
npm install next-auth axios

2. 配置Next-Auth

确保在你的Next.js项目中已经正确设置了Next-Auth。通常，这包括在pages/api/auth/[...nextauth].js中配置各种选项，例如提供者、数据库等。

javascript
import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    }),
    // 其他提供者
  ],
  // 其他配置
})

3. 创建Axios实例并配置拦截器

在你的项目中，创建一个统一的Axios实例，并在请求拦截器中添加Token。这里的关键是从Next-Auth的Session中获取Token，并将其附加到每个请求的Authorization头中。

javascript
import axios from 'axios'
import { getSession } from 'next-auth/client'

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  // 其他配置
});

axiosInstance.interceptors.request.use(async config => {
  const session = await getSession();
  const token = session?.accessToken;

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
}, error => {
  return Promise.reject(error);
});

export default axiosInstance;

4. 使用Axios实例进行API请求

现在，每次使用这个Axios实例发送请求时，它都会自动添加Authentication头（如果用户已经登录并且Session中存在Token）。

javascript
import axiosInstance from './path/to/axiosInstance'

const fetchData = async () => {
  try {
    const response = await axiosInstance.get('/data');
    return response.data;
  } catch (error) {
    console.error('Error fetching data: ', error);
    return null;
  }
}

5. 处理Token过期或错误

你还可以在响应拦截器中添加逻辑来处理Token过期或其他API错误。

javascript
axiosInstance.interceptors.response.use(response => {
  return response;
}, async error => {
  if (error.response.status === 401) {
    // 处理Token过期，例如通过刷新Token或重定向到登录页面
  }
  return Promise.reject(error);
});

结论

通过这种方式，使用Axios拦截器在Next-Auth环境中管理HTTP请求变得简单而高效。它不仅帮助保持代码的干净整洁，还能有效管理用户的认证状态，特别是在与API交互时自动处理Token添加和过期。