公司做网站推广要注意什么,wordpress主题怎么上传,网站seo 优化,wordpress cdn sae jqueryVue.js 中的登录状态管理#xff1a;使用计算属性避免重复登录
在前端开发中#xff0c;用户的登录状态管理是一个非常常见的需求。我们希望用户在成功登录后#xff0c;即使刷新页面#xff0c;也能够保持登录状态#xff0c;而不需要再次登录。在 Vue.js 中#xff0c…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这确保在计算登录状态时数据已经被正确初始化。路由守卫: 在每次路由跳转前通过路由守卫检查用户是否已登录。如果用户未登录且试图访问受保护的页面则重定向到登录页面。
总结
通过使用计算属性我们能够确保在计算用户登录状态时依赖的数据已经被正确初始化和加载。这避免了用户在页面刷新后需要重新登录的问题从而提升了用户体验。
希望这篇文章能帮助你理解 Vue.js 中的登录状态管理。如果你有任何问题或建议欢迎留言讨论
