Vue 项目中未登录状态如何统一处理

在 Vue 项目中，处理未登录状态（比如用户访问需要登录的页面时）是一项常见的需求。为了实现这一需求，我们通常使用 Vue Router 配合 Vuex 或者 Vue 的全局状态管理来统一处理未登录的状态，确保用户只能访问允许的页面。

以下是一个常见的实现步骤，采用 Vue Router 和 Vuex 来管理未登录状态：

1. 设置 Vuex 状态管理

我们可以在 Vuex 中存储用户的登录状态，并通过状态来决定是否需要重定向到登录页面。

创建 Vuex Store：

// store.jsimport { createStore } from 'vuex';export default createStore({state: {isLoggedIn: false,  // 用户登录状态},mutations: {login(state) {state.isLoggedIn = true;},logout(state) {state.isLoggedIn = false;},},actions: {checkLoginStatus({ commit }) {// 假设这里有一个异步操作来验证用户的登录状态const token = localStorage.getItem('auth_token');if (token) {commit('login');} else {commit('logout');}},},getters: {isLoggedIn(state) {return state.isLoggedIn;},},
});

在这里，我们用 isLoggedIn 来表示用户是否登录。checkLoginStatus 动作用来检查用户是否已经登录（例如通过 localStorage 中存储的 token 来验证）。

2. 设置 Vue Router 和路由守卫

然后我们配置 Vue Router，并使用 路由守卫 来拦截未登录的用户访问需要登录才能访问的页面。

配置 Vue Router：

// router.jsimport { createRouter, createWebHistory } from 'vue-router';
import { useStore } from 'vuex';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
import Dashboard from './components/Dashboard.vue';// 创建路由
const routes = [{path: '/',name: 'home',component: Home,},{path: '/login',name: 'login',component: Login,},{path: '/dashboard',name: 'dashboard',component: Dashboard,meta: { requiresAuth: true },  // 需要认证才能访问},
];const router = createRouter({history: createWebHistory(),routes,
});// 路由守卫
router.beforeEach((to, from, next) => {const store = useStore();// 确保我们在检查用户状态之前加载 Vuex 状态store.dispatch('checkLoginStatus').then(() => {const isLoggedIn = store.getters.isLoggedIn;if (to.meta.requiresAuth && !isLoggedIn) {// 如果目标路由需要认证并且用户未登录，重定向到登录页面next({ name: 'login' });} else {next();  // 继续导航}});
});export default router;

3. 路由守卫详解

beforeEach：Vue Router 提供的全局前置守卫，能在每次路由跳转之前检查条件。
to.meta.requiresAuth：我们为需要认证的页面添加了 meta 字段，来标记该路由是否需要用户登录。通过 to.meta.requiresAuth 可以获取这个标记。
store.dispatch('checkLoginStatus')：我们通过 Vuex 的 checkLoginStatus 动作来检查用户是否已登录。
next({ name: 'login' })：如果用户未登录且试图访问需要登录的页面，则重定向到登录页面。

4. 处理登录状态

在登录页面成功登录后，应该更新 Vuex 中的登录状态，并且可能需要将登录状态存储到 localStorage 或 sessionStorage 中，以便刷新页面时仍然能保持登录状态。

登录处理：

// Login.vue<template><div><h2>Login</h2><form @submit.prevent="handleLogin"><input type="text" v-model="username" placeholder="Username" /><input type="password" v-model="password" placeholder="Password" /><button type="submit">Login</button></form></div>
</template><script>
import { useStore } from 'vuex';export default {data() {return {username: '',password: '',};},methods: {handleLogin() {const store = useStore();// 这里做登录验证，并假设认证成功// 在实际应用中，你会发送 API 请求来验证用户名和密码localStorage.setItem('auth_token', 'some-auth-token');  // 假设成功获取 tokenstore.commit('login');this.$router.push({ name: 'dashboard' });  // 登录成功后跳转到仪表盘},},
};
</script>

5. 退出登录处理

在需要退出登录的地方，清除用户的认证信息，并更新 Vuex 状态。

退出登录：

// 在某个需要退出的组件中
methods: {handleLogout() {localStorage.removeItem('auth_token');  // 清除 tokenthis.$store.commit('logout');  // 更新 Vuex 状态this.$router.push({ name: 'home' });  // 跳转到首页},
}