nuxt3 请求 token 要怎么传？

Question

以前一直用 vue3，现在在学习用 nuxt3，遇到一个传 token 的问题，研究半天没明白，nuxt3 这个 token 要怎么请求的时候传过去？

我先讲下我的 vue3 是怎么用的
用户第一次访问网站，检查 localStorage.getItem('token') 是否为空，如果为空或token过时，直接跳到登录页面，登录后获取 token 存放到 localStorage.setItem('token', token) 里面，之后每次页面的所有请求都在 headers.Authorization 里面带上，如下：

import axios from 'axios';axios.post('/api/users', {        headers: {            Authorization: 'Bearer ' + localStorage.getItem('token')        }    }).then(response => {        console.log(response.data);    })    .catch(error => {        console.error(error);    });

那 nuxt3 获取的 token 放在哪，怎么在下面请求中带上？

const { data } = await useFetch('/api/users');

xxx.vue 文件中，更本就不能使用 localStorage，该怎么做？

网上都说用用 useState，

// states.tsexport const useToken = () => useState<string>('token', () => '');

登录后获取 token，存到 useToken().value = token 里面，那我刷新页面不就没了

Answer 1

这里主要涉及一个思路的转换。

在 Vue，或者说传统 SPA 里，所有请求都是 后 请求，即完成网页加载、JS 执行完毕后，再发起请求。这些请求，可以认为完全由开发者控制，即你知道什么时候该请求，然后发起请求。一般来说，所有的请求都是 数据交互类。

在 Nuxt 里，因为 SSR 的存在，所以请求至少可以分成两类：页面渲染类，数据交互类。前者会影响到 HTML 的内容。在网络环境里，存在大量缓存节点，假如跟用户相关的敏感数据渲染成 HTML，缓存到 CDN 当中，会是非常大的安全问题。所以 Nuxt 在 SSR 及其内部发起请求时，不会携带 cookie；在用户主动发起的请求里，才会携带 cookie。

回到你的问题。

1. localStorage 存在用户本地，无法在网络请求中携带，所以必须在网页准备就绪后才能使用
2. 所以要用 localStorage 的请求就不能放在 useAsyncData、useFetch 里，因为它们都是 SSR 的关键函数，它们第一次起作用的时候，运行环境是线上的 node.js
3. 如果你想在 SSR 阶段使用用户身份，可以用 cookie，并且需要手动将其放入请求中，参考 官方文档 useRequestHeaders
4. 否则的话，在 onMounted() 里使用 $fetch 请求，用传统 SPA 的形式就可以了。

Answer 2

在 Nuxt3 中，可以使用 ibm/q哲提出的qiniu-js存储库中的 cookies API 来存储和获取 token。具体操作如下：

首先，需要安装 qiniu-js 存储库，可以使用 npm 或 yarn 进行安装：

npm install qiniu-js

或

yarn add qiniu-js

然后，在需要使用 token 的地方，使用 cookies API 获取和存储 token。示例代码如下：

import { Cookies } from 'qiniu-js';// 在登录成功后获取 token，并使用 Cookies 存储async function login() {  const response = await fetch('/api/login');  const token = await response.json();  Cookies.set('token', token);}// 在需要使用 token 的请求中获取async function fetchData() {  const token = Cookies.get('token');  const response = await fetch('/api/users', {    headers: {      Authorization: 'Bearer ' + token,    },  });  const data = await response.json();  console.log(data);}

这样，在登录成功后，token 会被存储在用户的浏览器中，后续请求时会自动带上。同时，由于使用了 Cookies 存储 token，因此即使刷新页面，token 也不会丢失。