Question

我尝试创建axios实例并添加令牌头。

const apiClient = axios.create({
    baseURL: "..."
});
apiClient.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem("auth._token.local");
        if (token) {
            config.headers["Authorization"] = 'Bearer ' + token;
        }
        return config;
    },
    function(error) {
        return Promise.reject(error);
    }
);

但是它抛出错误localStorage未定义。我认为会引发错误，因为我在页面的fetch钩子中使用了它，但是服务器端没有localStorage。我应该如何修改我的代码？

Answer 1

如您所说，如果这段代码确实在fetch内部，那是正确的。首先在服务器上调用fetch，所以没有localStorage，因为没有浏览器就没有localStorage API。

您可以使用nuxt的上下文来检查您是在客户端还是在服务器上，例如：

// Client-side
if (process.client) {
    // ...your code checking for localhost
} else {
    // do whatever fallback on the server side....
}

更多信息： https://nuxtjs.org/api/context

如何在nuxt axios实例中添加令牌

1 个答案: