在 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 应用中实现登录状态判断与跳转。这种方式可以确保用户在登录状态下访问受保护的资源,而在未登录状态下被重定向到登录页面。在实际开发中,你可以根据项目需求进一步优化和完善登录状态判断与跳转逻辑。