vue使用pinia实现用户登录、退出功能

什么是 pinia？

Pinia 是 Vue 的专属的最新状态管理库，是Vuex状态管理工具的替代品，它允许你跨组件或页面共享状态。且同时支持 Vue 2 和 Vue 3
Pinia | 官网地址

pinia 特点

提供更加简单的API（去掉了mutation）
去掉了modules的概念，每一个store都是一个独立的木块
搭配Typescript一起使用提供可靠的类型推断
支持options api 和 composition api
支持服务器端渲染
轻量压缩后的体积只有1kb左右

vue项目添加pinia

npm install pinia

1. 在 main.js 中创建一个pinia实例并传递给应用：

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

2. 在 src/stores/ 中创建 user.js 用来管理用户数据相关

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 导入请求登录的接口
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
    //定义管理用户数据的state
    const userInfo = ref({})
    // 定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        userInfo.value = res.result
    }
    // 以对象的形式把state和action return出去
    return { userInfo, getUserInfo }
})

3. 在登陆页面使用

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
// 如果验证规则通过，则调用 userStore 中的 getUserInfo 函数
await userStore.getUserInfo({ account, password })
// 用户信息就会存在pinia里面

4. 用户数据持久化

用户数据中有一个关键的数据叫做token（用来标识当前用户是否登录），而Token持续一段时间才会过期
Pinia的存储是基于内存的，刷新就会丢失，为了保持登录状态，就要做到刷新不丢失，需要配合持久化进行存储

插件运行机制：操作state时把用户数据在本地的localStorage页存一份，刷新的时候会从localStorage中先取

Pinia有一个插件可以实现该功能：pinia-plugin-persistedstate，
pinia-plugin-persistedstate | 官网地址

该插件的特点：

与 vuex-persistedstate 相似的 API
所有 Store 均可单独配置
自定义 storage 和数据序列化
恢复持久化数据前后的 hook
每个 Store 具有丰富的配置
兼容 Vue 2 和 3
无任何外部依赖

①. 安装 pinia-plugin-persistedstate 插件：

npm i pinia-plugin-persistedstate

②. 将插件添加到 pinia 实例上

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

③. 创建 userStore 时，将 persist 选项设置为 true

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 导入请求登录的接口
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
    //定义管理用户数据的state
    const userInfo = ref({})
    // 定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        userInfo.value = res.result
    }
    // 以对象的形式把state和action return出去
    return { userInfo, getUserInfo }
}, {
    persist: true
})

到此，登录用户，发现用户数据已经存储在localStorage中

屏幕截图 2023-09-28 .png

5. 区分登录和非登录状态

// 登录状态时，添加判断条件
<div v-if="userStore.userInfo.token"></div>
// 非登录时
<div v-else></div>

6. 请求拦截器携带Token

为什么要在请求拦截器携带Token？
Token作为用户标识，在很多个接口中都需要携带Token才可以正确获得数据，所以需要在接口调用时携带Token。另外，为了统一控制采取请求拦截器携带的方案

如何配置？
Axios请求拦截器可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到请求header中，格式按照后端要求的格式进行拼接处理

在 src/utils/http.js 中配置

//axios 请求拦截器
httpInstance.interceptors.request.use(config => {
    // 1. 从pinia里面获取token数据
    const userStore = useUserStore()
    const token = userStore.userInfo.token
    // 2. 按照后端的要求拼接token数据
    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
}, e => Promise.reject(e))

7. 退出功能实现

逻辑：点击确定退出按钮时，清除当前用户信息，触发action，然后跳转到登陆页面

const confirm = () => {
  // 退出登录业务逻辑实现
  // 清除用户信息，触发action
  userStore.clearUserInfo()
  // 跳转到登录页面
  router.push('/login')
}

在src/stores/user.js中添加clearUserInfo清除用户信息方法

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 导入请求登录的接口
import { loginAPI } from '@/apis/user'

export const useUserStore = defineStore('user', () => {
    //定义管理用户数据的state
    const userInfo = ref({})
    // 定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        userInfo.value = res.result
    }
    // 退出时清除用户信息
    const clearUserInfo = () => {
        userInfo.value = {}
    }
    // 以对象的形式把state和action return出去
    return { userInfo, getUserInfo, clearUserInfo }
}, {
    persist: true
})

8. Token失效401拦截

Token的有效性可以保持一定时间，如果用户一段时间不做任何处理，Token就会失效，使用失效的Token再去请求一些接口，接口会报401状态码错误，需要我们做额外处理

解决方案：在axios响应拦截器做统一处理
逻辑：失败回调中拦截401，清除掉过期的用户信息，然后跳转到登录页