Vue 登录状态判断与跳转指南

在 Web 应用中，登录状态判断和跳转是常见的需求。用户在登录状态下可以访问受保护的资源，而在未登录状态下则需要重定向到登录页面。本文将介绍如何在 Vue.js 应用中实现登录状态判断与跳转。

一、准备工作

1. 安装 Vue Router

首先，确保你已经安装了 Vue Router。如果没有安装，可以通过以下命令进行安装：

npm install vue-router --save
# 或
yarn add vue-router

2. 配置路由

在 router/index.js 文件中配置路由，包括登录页面和受保护的页面。

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login.vue';
import ProtectedPage from '@/components/ProtectedPage.vue';

Vue.use(Router);

const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/protected',
name: 'ProtectedPage',
component: ProtectedPage,
meta: { requiresAuth: true }
},
// 其他路由配置
];

const router = new Router({
mode: 'history',
routes
});

export default router;

二、实现登录状态判断与跳转

1. 全局前置守卫

在 router/index.js 文件中，使用全局前置守卫 beforeEach 来判断用户的登录状态，并根据状态进行跳转。

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login.vue';
import ProtectedPage from '@/components/ProtectedPage.vue';

Vue.use(Router);

const routes = [
// 路由配置
];

const router = new Router({
mode: 'history',
routes
});

router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuthentication(); // 自定义函数，用于判断用户是否已登录

if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
next({ path: '/login', query: { redirect: to.fullPath } });
} else {
next();
}
} else {
next();
}
});

export default router;

2. 自定义登录状态判断函数

在上面的示例中，我们使用了一个名为 checkAuthentication 的自定义函数来判断用户是否已登录。你可以根据实际情况实现该函数，例如从 Vuex store 或 localStorage 中获取登录状态。

function checkAuthentication() {
// 从 Vuex store 或 localStorage 中获取登录状态
const token = localStorage.getItem('token');
return !!token;
}

3. 登录页面处理

在登录页面组件中，处理登录逻辑，并在登录成功后根据 redirect 参数进行跳转。

<template>
<div>
<h1>登录</h1>
<form @submit.prevent="handleLogin">
<!-- 表单内容 -->
</form>
</div>
</template>

<script>
export default {
methods: {
handleLogin() {
// 处理登录逻辑
// ...

// 登录成功后，根据 redirect 参数进行跳转
const redirect = this.$route.query.redirect || '/';
this.$router.push(redirect);
}
}
};
</script>

三、总结

通过全局前置守卫 beforeEach 和自定义登录状态判断函数，我们可以在 Vue.js 应用中实现登录状态判断与跳转。这种方式可以确保用户在登录状态下访问受保护的资源，而在未登录状态下被重定向到登录页面。在实际开发中，你可以根据项目需求进一步优化和完善登录状态判断与跳转逻辑。