【vue3+pinia+Cookie】实现token登录及数据持久化

vue2后台登录项目，目前接触到的基本上都是vuex+本地存储或vuex+cookie或vuex+专门用于持久化vuex的库，如：vuex-persistedstate

vuex默认情况下是在客户端内存中保存应用程序的状态，当页面刷新的时候，内存中的数据会丢失，导致vuex中的数据也会丢失。因为vuex的状态存储是临时的，不会被持久化到本地存储或服务器。

所以做登录的时候仅靠vuex是不够的，还需要将数据持久化。

**在vue3中也是同理，本文使用的是pinia+Cookie

pinia同vuex，是vue.js的官方状态管理库，用于管理应用程序的状态（数据），集中化状态管理，组件间数据共享，更好的响应式特性，支持扩建发展，方便的调试工具。

Cookie是一种在客户端（浏览器）和服务器之间传递数据的小文件，它通常由服务器在HTTP响应中设置，并存储在浏览器中，由浏览器在后续的请求中将Cookie发送回服务器。
Cookie主要用于存储和传递一些关于用户和网站之间交互的数据，例如用户的偏好设置，登录信息，购物车内容等，它们可以用于在不同的请求之间保持状态，使得网站能够识别用户并提供个性化的体验。
和Cookie有类似机制，用于在客户端和服务端传递数据的机制的还有：
1、Session Storage(会话存储)，该数据仅在当前会话期间有效，数据只在浏览器关闭窗口之前保留
2、Local Storage（本地存储），该数据在不同会话之间是持久的，只有在用户明确清除浏览器缓存或通过代码删除时才会被移除
3、web Storage（网页存储），Web Storage是Session Storage和Local Storage的总称。它包括Session Storage和Local Storage这两个机制，提供了在客户端存储数据的能力。
4、IndexedDB（索引数据库），IndexedDB是一种在客户端存储结构化数据的API。它提供了一个类似数据库的环境，可以在浏览器中创建和管理数据库，以存储和检索大量数据。与Cookie不同，IndexedDB可以存储更复杂的数据类型，并提供更高级的数据查询和索引功能
说回Cookie，一个Cookie主要包含以下几个属性：
名称（Name）：Cookie的名称或键（Key），用于标识Cookie。
值（Value）：与Cookie相关联的具体数据值。
域（Domain）：指定Cookie可用的域名。默认情况下，Cookie仅在创建它的域和其子域名下可用。
路径（Path）：指定Cookie可用的路径。默认情况下，Cookie仅在创建它的页面所在路径下可用。
过期时间（Expires）：指定Cookie的过期时间。一旦过期，浏览器将不再发送该Cookie。
Cookie的工作流程：
客户端（浏览器）发送请求到服务器。
服务器在HTTP响应中设置Cookie。
浏览器接收到HTTP响应，并将Cookie存储在本地。
在后续的请求中，浏览器将Cookie发送到服务器。
服务器接收到Cookie，并根据其中的数据进行处理。
通过使用Cookie，网站可以在客户端和服务器之间传递数据，并维持状态，实现个性化的用户体验和其他功能。**

现在开始详细的思路及代码展示：

1、如果在项目中直接使用cookie，写法会有些复杂，这个时候就要说js-cookie啦，一个用于在浏览器中操作Cookie的Javascript库，提供了一组简单而强大的API，方便地设置，读取和删除Cookie

安装js-cookie

npm install --save js-cookie

utils文件夹下新建auth.js
在这里插入图片描述
auth.js

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
   
    
    
  return Cookies.get(TokenKey)//获取键名为Admin-Token的值
}

export function setToken(token) {
   
    
    
  return Cookies.set(TokenKey, token)//设置键名Admin-Token，值为token
}

export function removeToken() {
   
    
    
  return Cookies.remove(TokenKey)//移除键名为Admin-Token的值
}

2、pinia中调用登录、获取用户信息及退出接口。将登录接口、获取用户信息接口和登出接口放在pinia中的主要原因是为了方便的在应用程序中进行状态管理和共享数据

登录接口：：当用户通过登录界面输入用户名和密码进行登录时，登录接口负责向服务器发送请求验证用户身份。将登录接口放在Vuex中可以存储用户的登录状态和认证信息，并在需要的地方进行调用和更新。这样，其他组件可以轻松地访问和使用用户登录信息。
获取用户信息接口：在应用程序中，可能会有多个组件需要获取用户的个人信息来展示或执行某些操作。通过将获取用户信息接口放在Vuex中，可以实现数据的统一管理和共享。当用户登录后，将用户信息保存在Vuex中，其他组件可以直接从Vuex获取用户信息，而不需要在每个组件中单独请求数据
登出接口：登出接口负责清除用户的登录状态，并将用户重定向到登录页面。将登出接口放在Vuex中可以方便地更新登录状态和清除用户信息，确保应用程序的其他部分能够及时响应。

通过将这些接口放在Vuex中，可以方便地进行状态管理和共享数据，提高代码的可维护性和可拓展性。同时，将数据集中存储在Vuex中，还有助于避免在组件之间频繁传递数据，提高了应用程序的性能。

在store文件夹下新建index.js和新建modules文件夹，新建user.js和index.js
index.js中创建pinia实例对象，对外导出
具体如下：

import {
   
    
     createPinia } from "pinia"
const store = createPinia()
export default store

user.js
在这里插入图片描述

先引入defineStore，pinia中通过defineStore定义store

import {
   
    
    defineStore} from "pinia"

引入登出，获取用户信息和登录的接口

import {
   
    
     login, logout, getInfo } from '@/api/login'

再引入操作token的方法

import {
   
    
     getToken, setToken, removeToken } from '@/utils/auth'

具体如下：

import {
   
    
    defineStore} from "pinia"
import {
   
    
     login, logout, getInfo } from '@/api/login'
import {
   
    
     getToken, setToken, removeToken } from '@/utils/auth'

//对 `defineStore