进度

引入pinia作为状态管理
使用了devtools
必须登陆后才能访问其他页面

登陆后访问权限记录

引入pinia
在main.ts中引入不做赘述，可见pinia官网说明
stores/token.ts

export const useTokenStore = defineStore('token', () => {
    const tokenJson = ref("")
    const token = computed(() => {
        try {
            // return JSON.parse(tokenJson.value)
            // 目前的token是字符串，还没做到json
            return (tokenJson.value || window.localStorage.getItem("TokenInfo") || "")
        } catch (err){
            ElMessage.error("json字符串格式有误，对象转换失败")
            window.localStorage.setItem("TokenInfo", "")
            throw err
        }
    })

    function saveToken(data: string) {
        tokenJson.value = data
        window.localStorage.setItem("TokenInfo", data)
    }

    // 向外暴露
    return { token, saveToken }
})

登录时将token存入浏览器缓存中
LoginView.vue
store.saveToken(res.data.token)
访问路径时先验证是否有了token，否则返回到login
router/index.ts

router.beforeEach((to, from, next) => {
    if(to.matched.some((r) => r.meta?.requiresAuth)) {
        const store = useTokenStore()
        if (!store.token){
            next({name: "login", query:{ redirect: to.fullPath}})
        }
    }

    next()
})