记录vue3+vite+pinia+ts构建的项目历程

前言

我很佩服那些将自己的项目过程记录下来的前辈朋友们，我人比较懒，就想到哪写到哪，可能写着写着语句都不通顺了。 也希望通过这次的项目历程锻炼我的表达能力，分析问题解决问题的能力。 有幸被前辈朋友们浏览到的话，有误请指正，欢迎各位友好谈论。

2023/05/25 pinia数据持久化出现问题

问题概述

今晚准备配置路由鉴权时，发现前期配置的pinia 数据持久化插件pinia-plugin-persist 失效了。动图所示👇

明显看到localStorage内的token 并没有被存储，导致出现bug：一刷新就会跳转到login页面，因为路由鉴权中，路由全局前置守卫在判断有无 token ，没有token就会跳转到login页面

路由鉴权代码

import router from '@/router'

// 引入进度条插件和样式
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 用户未登录 可以访问login，其他路由均不能访问
// 用户已登录 不能访问login，其他路由都可以访问

// 引入pinia，useUserStore
import pinia from './store'
import { useUserStore } from './store/modules/user'

// Message 消息提示
import { ElMessage } from 'element-plus'

let userStore = useUserStore(pinia)

// 路由全局前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()

  // 解构，获取token，用户名
  let token = userStore.token
  let username = userStore.username
  if (token) {
    if (to.path == '/login') {
      next({ path: from.path })
    } else {
      if (username) {
        next()
      } else {
        try {
          // 发请求获取用户信息 
          // 这是为了让每一个页面都能得到用户信息
          await userStore.userInfo()
          next()
        } catch (error) {
          ElMessage.error(error.messsage)
        }
      }
    }
  } else {
    // 用户未登录
    if (to.path == '/login') {
      next()
    } else {
      next({ path: '/login', query: { redirect: to.path } })
    }
  }
})

// 路由全局后置守卫
router.afterEach((to, from) => {
  nprogress.done()
})

排除问题阶段

我立马想到是不是因为我重新安装了pinia，导致我的插件没有生效。 做过类似路由守卫这操作的应该知道，直接引入小仓库控制台会提示错误信息，大致内容就是说没有安装pinia

我将路由鉴权注释点后，就正常了，token能被存储到localStorage内了。确定了问题是出在了重新引入pinia这块。

解决过程

我也真是异想天开，我想这既然是重新引入安装pinia的问题，那我再一次安装插件呗。

import { useUserStore } from './store/modules/user'

import piniaPersist from 'pinia-plugin-persist'

pinia.use(piniaPersist)

// Message 消息提示
import { ElMessage } from 'element-plus'

let userStore = useUserStore(pinia)

// 这是真的奇葩，我想着用链式使用持久化插件
// 不过失败了，报错了
userStore.persist: {
  enabled: true,
  strategies: [
    {
      key: 'user',
      paths: ['token'],
      storage: localStorage,
    },
  ],
}

看到错误提示，我又断了思绪了，也怀疑是不是因为重新安装pinia的原因。

传送门

更多功能欢迎大家体验❤

• 这是我本次项目的github仓库地址：github.com/lisirui086/…
• 有兴趣的可以看看我的项目是什么原因导致持久化插件失效了。
• 明天再继续研究吧。/(ㄒoㄒ)/~~