Axios 实例不适用于 Nextjs：'Localstorage not defined'

Question

我有一个 React 应用程序。

我有一个想重用的 axios 组件：

import axios from 'axios'
import dynamic from 'next/dynamic'    
const baseUrl = 'http://127.0.0.1:8000/'

const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {
        Authorization: localStorage.getItem('access_token')
        ? 'Bearer ' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }
})

export default axiosInstance

现在，我尝试将其导入我的注册页面，如下所示：

import axiosInstance from "axiosInstance"

文件本身如下所示：

const handleFormSubmit = async (values: any) => {
    axiosInstance.post(`account/register/`, {
      username: values.username,
      email: values.email,
      password: values.password,
      confirm_password: values.confirm_password,
    }).then((response) => {
      console.log(response);
    });

    // router.push('/profile')
    console.log(values);
  };

但是，这会引发错误：

有人可以帮我解决这个问题吗？我是 Nextjs 的新手，看了

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

但不确定如何在此上下文中使用它。

Answer 1

localStorage 是浏览器存储的一部分，而不是服务器存储的一部分。您可以使用环境变量并使用 process.env.ACCESS_TOKEN

更多可以阅读here

基本上你会创建一个名为 .env.local 的文件 NextJS 内置了对此文件的支持。

这里你定义的变量如下

ACCESS_TOKEN=myAccessTokenIsAwesome
SOMETHING_ELSE=myOtherKeyINeed

然后在您的代码中您可以使用 process.env.ACCESS_TOKEN 来使用这个定义的环境变量

Answer 2

localStorage 是 window 对象的属性，由于 next.js 是服务器端渲染框架，当下次在服务器上渲染组件时， window.localStorage 将是未定义。

为了导入它，像这样设置 axios 实例：

const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {
        // if localStorage is not defined, it wont throw error
        Authorization:localStorage && localStorage.getItem('access_token')
        ? 'Bearer ' + localStorage.getItem('access_token')
        : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }
})

然后在里面

Axios 实例不适用于 Nextjs：'Localstorage not defined'

Axios instance not working with Nextjs: 'Localstorage not defined'

javascript

reactjs

server-side-rendering

axios

next.js