一. 前言

     第一次使用nuxt3移植之前的项目时遇到了问题，在登录功能时需要使用token，在CLI中可以使用localStorage来解决，但是如果在nuxt3中使用，会直接报错500，localStorage not definded，在尝试了许多方法都无效后，最终解决，分享自己的解决方法。前端新手，希望多多包涵。

二.问题原因

    在CLI中默认使用的是客户端渲染，可以使用存储在本地浏览器的localStorage，而由于nuxt使用的是SSR(服务器端渲染)，这意味着，像localStorage，window等涉及到本地浏览器的都不可以直接使用。当然我们可以使用一些特殊操作，比如说使用 process.client 检测是否处于客户端环境中，这是后话了。

三.解决方法

     由于网上的方法多而杂，并且有许多插件不一定适应nuxt3，或者配置时会有问题，在这里我提供个人解决的一个思路：

使用 pinia  + pinia-plugin-persistedstate（插件）

pinia 文档链接​​​​​

pinia-plugin-persistedstate  文档链接

1.安装pinia

yarn add pinia @pinia/nuxt
# 或者使用 npm
npm install pinia @pinia/nuxt

注意！使用npm有可能会报错！

请按官方文档在 package.json 中添加如下

"overrides": { 
  "vue": "latest"
}

2.安装pinia-plugin-persistedstate/nuxt

yarn add -D @pinia-plugin-persistedstate/nuxt
// 或者
npm i -D @pinia-plugin-persistedstate/nuxt

3.在nuxt.config.ts配置

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
}) 

4.创建在根目录下创建stores/user.js

有关文件目录结构的问题详见 nuxt3 官方文档

import { defineStore } from "pinia"; // 引入pinia
//  stores/user
export const useUserStateStore = defineStore("main", {
  state: () => {
    return {
      token: "",
    };
  },
  persist: process.client && { // 仅在客户端使用
    storage: localStorage, // localStorage 本地存储，可替换sessionStorage
  },
});

注意，由于localStorage只能在客户端使用，所以需要先声明: process.client

5.关于数据的使用(token为例)

在login.vue登录界面

import { useUserStateStore } from "~/stores/user.js";

const store = useUserStateStore(); //定义store

......
//在登录返回数据后
if (response.data.msg === "success") {
    store.token = response.data.data.token;//将token存入store
    // router.push("/"); // 路由跳转
    }
else{ ... }

在需要使用token的界面

import { useUserStateStore } from "~/stores/user";

const store = useUserStateStore ;

const token = store.token ; //使用token

const userInfo = store.userInfo ; //使用userInfo

...

四.关于使用sessionStorage还是localStorage

   在pinia-plugin-persistedstate中为我们提供了两种本地存储的方法，sessionStorage和localStorage都是浏览器提供的客户端存储机制，用于在浏览器中存储数据。它们之间的主要区别在于数据的生命周期、作用域和用途：

1.生命周期的不同

*  sessionStorage 的数据在浏览器会话期间有效。会话期间是指用户打开浏览器窗口并在其中浏览页面的时间段。一旦用户关闭浏览器窗口，sessionStorage 中的数据将被删除。

*  localStorage 的数据是持久的，它会一直保存在浏览器中，即使用户关闭浏览器窗口或重新启动计算机，数据仍然保持不变，直到被显式删除。

2.作用域的不同

*   sessionStorage 的作用域是窗口级别的。这意味着在同一浏览器窗口或标签页中打开的不同页面可以共享相同的 sessionStorage 数据。但是，不同浏览器窗口或标签页之间的数据不会共享。

*   localStorage 的作用域是域名级别的。这意味着在同一域名下的不同页面和不同浏览器窗口或标签页之间都可以共享相同的 localStorage 数据。

3. 用途的不同

*  sessionStorage 通常用于存储在会话期间需要在页面之间共享的临时数据，例如表单数据、会话令牌等。当用户关闭浏览器时，这些数据自动清除，不会留下任何痕迹。

*  localStorage 通常用于存储长期的用户数据，例如用户首选项、本地缓存数据、用户身份验证令牌等。这些数据在浏览器关闭后仍然保留，直到用户显式删除它们。

    总的来说，sessionStorage 适用于短期和会话级别的数据存储，而 localStorage 适用于长期和持久性的数据存储。而在本例中我希望存储的是token(用户身份令牌)， 而令牌通常需要在用户退出登录之前持久保存，以便用户可以在多个会话之间保持登录状态。

7.更多方法

   在我查找资料的过程中，也了解了不少其他的方法，但是碍于个人能力有限，故在此仅提供一个大概的思路。

1.使用nuxt3 自带的useFetch( )，useRequestHeaders( )等，直接从请求头部分拿取authentication，也就是服务端请求的token是从本地浏览器端拿来的。详见 nuxt3 官方文档

2. 使用nuxt-auth 模块，进行身份管理。详见 auth 官方文档

3.使用其他插件如vues，详见vueuse 官方文档