vue router实现登录
Vue Router 实现登录功能
在 Vue.js 应用中，使用 Vue Router 实现登录功能通常涉及路由守卫、权限控制和状态管理。以下是实现登录功能的关键步骤：
配置路由守卫
在路由配置中设置全局前置守卫 (beforeEach)，检查用户是否已登录。未登录用户尝试访问受限页面时，重定向到登录页面。
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 或其他认证状态检查
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router创建登录组件
实现登录表单，处理用户凭据提交，并在成功登录后存储认证令牌并重定向。
<!-- views/Login.vue -->
<template>
<div>
<form @submit.prevent="login">
<input v-model="username" type="text" placeholder="用户名">
<input v-model="password" type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 模拟API调用
if (this.username && this.password) {
localStorage.setItem('token', '模拟token')
this.$router.push('/dashboard')
}
}
}
}
</script>处理登出功能
实现登出逻辑，清除认证状态并重定向到登录页面。
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}与状态管理集成
对于更复杂的应用，可以将认证状态集成到 Vuex 中。
// store/index.js
export default new Vuex.Store({
state: {
token: localStorage.getItem('token') || null
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
clearToken(state) {
state.token = null
localStorage.removeItem('token')
}
},
getters: {
isAuthenticated: state => !!state.token
}
})更新路由守卫使用 Vuex 状态：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth) && !store.getters.isAuthenticated) {
next('/login')
} else {
next()
}
})动态路由
对于基于角色的权限控制，可以实现动态路由添加。
// 登录成功后动态添加路由
store.dispatch('login', credentials).then(() => {
const adminRoutes = [
{ path: '/admin', component: AdminPanel }
]
router.addRoutes(adminRoutes)
next('/dashboard')
})这些步骤提供了在 Vue.js 应用中实现登录功能的基础框架，可以根据具体需求进行调整和扩展。
