如何将 Axios 拦截器与 Next-Auth 结合使用

Question

我正在将我的CRA应用程序转换为拦截器模式Nextjs并遇到一些问题Axios。

它有效，但我被迫创建一个Axios实例并将其传递给每个 api 调用。

有一个更好的方法吗？

这是我现在所拥有的：

Profile.js:

import { useSession } from 'next-auth/react'

function Profile(props) {
    const { data: session } = useSession()
    const [user, setUser] = useState()
    useEffect(()=> {
      const proc= async ()=> {
        const user = await getUser(session?.user?.userId)
        setUser(user)
      }
      proc()
    },[])
    
    return <div> Hello {user.userName}<div>
}

getUser.js:

export default async function getUser(userId) {
    const axiosInstance = useAxios()
    const url = apiBase + `/user/${userId}`
    const { data } = await axiosInstance.get(url)
    return data
}

useAxios.js:

import axios from 'axios'
import { useSession } from 'next-auth/react'

const getInstance = (token) => {
    const axiosApiInstance = axios.create()

    axiosApiInstance.interceptors.request.use(
        (config) => {
            if (token && !config.url.includes('authenticate')) {
                config.headers.common = {
                    Authorization: `${token}`
                }
            }
            return config
        },
        (error) => {
            Promise.reject(error)
        }
    )

    return axiosApiInstance
}

export default function useAxios() {
    const session = useSession()
    const token = session?.data?.token?.accessToken
    return getInstance(token)
}

Answer 1

如果其他人遇到这个问题，这就是我解决它的方法（使用 getSession）：

归功于： https://github.com/nextauthjs/next-auth/discussions/3550#discussioncomment-1993281

import axios from 'axios'
import { getSession } from 'next-auth/react'

const ApiClient = () => {
    const instance = axios.create()
    instance.interceptors.request.use(async (request) => {
        const session = await getSession()

        if (session) {
            request.headers.common = {
                Authorization: `${session.token.accessToken}`
            }
        }
        return request
    })

    instance.interceptors.response.use(
        (response) => {
            return response
        },
        (error) => {
            console.log(`error`, error)
        }
    )

    return instance
}

export default ApiClient()