在 NextJS 中未使用 axios 拦截器定义 localStorage

IT技术 javascript reactjs next.js
2022-07-26 01:16:32

我的根目录中有一个文件api.js，它负责调用外部 API（请求和响应拦截器）。我正在使用它来注入 access_token，所以我的请求拦截器看起来像这样；

import axios from 'axios';

const api = axios.create({
    baseURL: process.env.NEXT_PUBLIC_API_URL
});

// Add request interceptor
api.interceptors.request.use(
    async config => {
        const token = localStorage.getItem('access_token');

        if (token) {
            config.headers['Authorization'] = 'Bearer ' + token;
        }
        config.headers['Content-Type'] = 'application/json';
        config.headers['Accept'] = 'application/json';

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

在我的页面目录中，我有一个名为 users.js 的文件......我要做的就是从我的外部 API 返回用户列表，并在/users页面加载时将其显示在网格中。我的users.js文件目前看起来像这样；

import api from "../services/api"

export default function Users() {
    return (
        <div>
        </div>
    )
}

export async function getStaticProps() {
    const res = await api.get('/accounts');

}

但是当我运行它时，我收到以下错误；

ReferenceError: localStorage is not defined

该错误api.js在以下行引用了该文件；

const token = localStorage.getItem('access_token');

我似乎无法弄清楚发生了什么。任何帮助将不胜感激

1个回答

您正在server-side执行 fetch ingetStaticProps()并且localStorage在服务器端不存在。因此，如果您在客户端获取数据，localStorage则不会undefined。

  • getStaticProps— 在构建时获取数据。
  • getStaticPaths— 在构建时预渲染动态路由。
  • getServerSideProps— 获取每个请求的数据。
  • swr— 在运行时从客户端获取数据。

如果您需要在客户端获取数据，则必须使用swr.

import api from "../services/api"
const fetcher = url => api.get('/accounts'); // .then(res => res.data)

function Users() {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

检查这个swr。

检查此链接以获取getStaticProps.

还要检查这个以获取有关客户端/服务器端获取的更多信息。

其它你可能感兴趣的问题
上一篇如何在 React 中显示 FastAPI 的 Fileresponse 图像？ 下一篇如何使用替换为 React 中字符串的特定部分添加颜色？