Vue.js 中的登录状态管理：使用计算属性避免重复登录20240531

Vue.js 中的登录状态管理：使用计算属性避免重复登录

在前端开发中，用户的登录状态管理是一个非常常见的需求。我们希望用户在成功登录后，即使刷新页面，也能够保持登录状态，而不需要再次登录。在 Vue.js 中，这可以通过响应式引用和计算属性来实现。本文将详细介绍如何使用 Pinia 状态管理库，通过计算属性避免重复登录的问题。

问题描述

在实现用户登录状态管理时，我们遇到一个问题：使用响应式引用存储用户信息和 token 时，无法有效避免重复登录。然而，当我们改用计算属性来存储这些信息时，问题得以解决。这是为什么呢？

响应式引用和计算属性

响应式引用 (`ref`)

ref 是 Vue.js 提供的一种方式，用于创建响应式的数据容器。它可以容纳任意类型的值，并使这些值在响应式系统中可追踪。

let _user = ref({});
let _token = ref("");

计算属性 (`computed`)

computed 是基于其他响应式数据计算出来的属性。它们会缓存结果，直到依赖的响应式数据发生变化时才重新计算。

let user = computed(() => {if (Object.keys(_user.value).length === 0) {let user_str = localStorage.getItem(USER_KEY);if (user_str) {_user.value = JSON.parse(user_str);}}return _user.value;
});let token = computed(() => {if (!_token.value) {let token_str = localStorage.getItem(TOKEN_KEY);if (token_str) {_token.value = token_str;}}return _token.value;
});

解决方案

为了确保用户在页面刷新后无需重新登录，我们可以使用计算属性来管理用户信息和 token。这样，当我们访问计算属性时，它们会自动从 localStorage 中加载数据，并初始化响应式引用。

完整代码

`auth.js`

import { ref, computed } from "vue";
import { defineStore } from "pinia";const USER_KEY = "OA_USER_KEY";
const TOKEN_KEY = "OA_TOKEN_KEY";export const useAuthStore = defineStore("auth", () => {let _user = ref({});let _token = ref("");function setUserToken(user, token) {_user.value = user;_token.value = token;localStorage.setItem(USER_KEY, JSON.stringify(user));localStorage.setItem(TOKEN_KEY, token);}let user = computed(() => {if (Object.keys(_user.value).length === 0) {let user_str = localStorage.getItem(USER_KEY);if (user_str) {_user.value = JSON.parse(user_str);}}return _user.value;});let token = computed(() => {if (!_token.value) {let token_str = localStorage.getItem(TOKEN_KEY);if (token_str) {_token.value = token_str;}}return _token.value;});let is_logined = computed(() => {if (Object.keys(user.value).length > 0 && token.value) {console.log("is_logined return true");return true;}return false;});return { setUserToken, user, token, is_logined };
});

`router/index.js`

import { createRouter, createWebHashHistory } from 'vue-router';
import login from '@/views/login/login.vue';
import frame from '@/views/main/frame.vue';
import { useAuthStore } from '@/stores/auth';const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'frame',component: frame},{path: '/login',name: 'login',component: login}]
});// 钩子函数实现导航守卫,判断用户是否已登陆
router.beforeEach((to, from) => {const authStore = useAuthStore();if (!authStore.is_logined && to.name !== 'login') {return { name: 'login' };}
});export default router;

详细步骤

存储用户信息和Token: 当用户登录成功后，调用 setUserToken 方法，将用户信息和 token 存储在 localStorage 中，并更新 _user 和 _token。
从 localStorage 读取数据: user 和 token 计算属性在首次访问时从 localStorage 读取数据，并初始化 _user 和 _token。
计算 is_logined: is_logined 依赖于 user.value 和 token.value，这确保在计算登录状态时，数据已经被正确初始化。
路由守卫: 在每次路由跳转前，通过路由守卫检查用户是否已登录。如果用户未登录且试图访问受保护的页面，则重定向到登录页面。