vue路由实现登录
Vue 路由实现登录功能
在 Vue 项目中，可以通过 Vue Router 实现登录功能，结合路由守卫和权限控制来保护需要认证的页面。
安装 Vue Router
确保项目中已安装 Vue Router。如果没有安装，可以通过以下命令安装：
npm install vue-router配置路由
在 router/index.js 中配置基本路由，包括公开路由（如登录页）和需要认证的私有路由。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true } // 标记需要认证
}
]
const router = new VueRouter({
routes
})
export default router实现登录逻辑
在登录页面（Login.vue）中，实现用户登录逻辑，通常包括表单提交和认证请求。
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="Username" />
<input v-model="password" type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
// 调用登录 API
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
// 存储 token
localStorage.setItem('token', response.data.token)
// 跳转到受保护的路由
this.$router.push('/dashboard')
} catch (error) {
console.error('Login failed:', error)
}
}
}
}
</script>路由守卫
使用全局前置守卫 beforeEach 检查用户是否已登录，未登录则重定向到登录页。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})登出功能
在需要登出的地方（如导航栏），添加登出逻辑。
methods: {
handleLogout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}动态路由
对于更复杂的权限控制，可以结合动态路由和角色权限管理，动态生成路由表。
// 根据用户角色过滤路由
function filterRoutes(routes, role) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return route.meta.roles.includes(role)
}
return true
})
}通过以上步骤，可以实现 Vue 路由的登录功能，保护需要认证的页面，并管理用户的登录状态。
