nuxt3 请求 token 要怎么传?-灵析社区

ciiiiinema

以前一直用 `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.ts export const useToken = () => useState('token', () => ''); 登录后获取 `token`,存到 `useToken().value = token` 里面,那我刷新页面不就没了

阅读量:10

点赞量:0

问AI
这里主要涉及一个思路的转换。 在 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" (https://link.segmentfault.com/?enc=XI%2BPn30UxW7POOqCbxjxgw%3D%3D.bGPX65BJI03CcWL5IF0OgPdwTpo0M%2F8By4T3QDYsQ6gDLRWZHO4OS%2BxP5xKvQun%2B23woUuOH91qbLGuD7CKB4g%3D%3D) 4. 否则的话,使用 "server: false",或者在 "onMounted()" 里使用 "$fetch" 请求,用传统 SPA 的形式就可以了。