使用Pinia持久化存储实现用户认证系统

结果图

知识点

vite和@latest的中间是不能有空格的

-- save

这里的user.js,其实就是类似C++中写类时的一个声明与定义分离的一个操作，是面对大段大段的代码做出的一个必然的选择;在week04中，我们也发现到，区别于C++呢，在vue的JavaScript中，这里'类'声明与定义后是要自己给抛出的，即这里的export default bus 那块；不过我们这里是export const ...

状态管理

state;也就是说，从这里看，pinia它就是我们创建的全局变量，我们使用上的全局变量，是pinia的state属性中的成员变量;通过对比也可以看出，pinia背后做了小动作，把state给默认省掉了，state类的属性直接被看出pinia的成员变量了

LocalStorage;注我们在week06时使用到了sessionStorage

Getter;它返回的还是一个值，是基于成员变量的一个高级值

Meta:{requiresAuth: true}

Export 的具名const 与默认default

路由守卫这里，应是隐含着一个路由树，有前序和后序，根就是当前路由，前序就是前一节点路由，后序就是目标路由

登录逻辑，即背后技术部分是路由守卫，是前置条件，是先导是前序，是守门人即守卫

很朴素的提交，hanleLogin

这一块的挂载；使用了store要挂pinia,就类似路由使用一样，前者是来着自己项目的js，后者是来着下载的pinia库，应是自行的链接useStore.js

具体使用时的挂载啊；route是路由对象，router是路由器对象哦；这里也折射了OOP中一切皆对象的观点

实验数据

（1）创建认证 Store

在 Pinia Store 中定义与认证相关的状态（State）、操作（Actions）和获取器（Getters）。Store 的初始状态尝试从localStorage中读取。

javascript 复制代码

import {defineStore} from 'pinia'
export const useUserStore = defineStore('user',{
    //状态（State)
    //从localStorage中读取，实现"刷新后状态恢复"
    state: ()=>({
        token: localStorage.getItem('token') || '',
        username: localStorage.getItem('username') || ''
    }),

    //获取器Getter
    getters:{
        isLoggedIn: (state) => !!state.token
    },

    //操作器Action
    actions:{
        //登录： 更新state + 同步写入localStorage
        login(username, token){
            this.token = token
            this.username = username
            //手动持久化
            localStorage.setItem('token', token)
            localStorage.setItem('username', username)
        },
        
        //登出: 清空state + 同步清除localStorage
        logout(){
            this.token = ''
            this.username = ''
            //手动清除
            localStorage.removeItem('token')
            localStorage.removeItem('username')
            
        }
    }

    //注意: 没有 persiste配置了， 持久化全靠 actions 里的 localStorage 操作
})

（2）配置路由守卫

使用Vue Router的全局前置守卫 (beforeEach)，在用户访问需要认证的路由时进行检查。

javascript 复制代码

import {createRouter, createWebHashHistory } from 'vue-router'
import LoginView from '../components/LoginView.vue'
import MainView from '../components/MainView.vue'
import HomeView from '../components/HomeView.vue'
import { useUserStore } from '../store/user.js'

const routes = [
    {path: '/', redirect: '/login'},
    {path: '/login', name: 'login', component: LoginView},
    {
        path: '/main',
        name: 'main',
        component: MainView,
        meta: {requiresAuth: true}
    },
    {
        path: '/home',
        name: 'home',
        component: HomeView,
        meta: {requiresAuth: true}
    },
    {path: '/:pathMatch(.*)*', redirect: '/login'}
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

//全局前置守卫
router.beforeEach((to, from) => {
    const userStore = useUserStore()

    //如果目标路由需要认证，且用户未登录
    if(to.meta.requiresAuth && !userStore.isLoggedIn){
        return{
            path: '/login',
            query: { redirect: to.fullPath}  //  保存原目标地址，登录后跳回
        }
    }

    return true
})
export default router

备注

哈哈，这里竟然没有报错

还有这里，用了路由守卫，但是把路由是视图的配置搞忘了，哈哈；跟深的是，login也应是视图的一部分，应该是放到App.vue下同一管理；router/index.js里的是路由链接，App.vue里要配的叫做路由视图

这里用了useUserStore.logout,可以紧接搭配router.push('/login')

这里有个规范

分支用的标识名

学习一下好东西

我的ai工具使用的是opencode

实验数据基于课程老师的资料