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;

详细步骤

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

总结

通过使用计算属性，我们能够确保在计算用户登录状态时，依赖的数据已经被正确初始化和加载。这避免了用户在页面刷新后需要重新登录的问题，从而提升了用户体验。

希望这篇文章能帮助你理解 Vue.js 中的登录状态管理。如果你有任何问题或建议，欢迎留言讨论！