vue实现登录路由
Vue 登录路由实现方法
路由配置
在 router/index.js 中配置登录路由和需要权限的路由。使用 meta 字段标记需要认证的路由。
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',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
})路由守卫
添加全局前置守卫检查路由是否需要认证。未登录用户访问受保护路由时重定向到登录页。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
next({ name: 'Login' })
} else {
next()
}
} else {
next()
}
})登录逻辑
在登录组件中处理登录成功后的路由跳转。通常需要存储认证令牌并跳转到目标页面。
methods: {
handleLogin() {
// 假设这是登录API调用
loginApi(this.username, this.password).then(response => {
localStorage.setItem('token', response.data.token)
this.$router.push({ name: 'Dashboard' })
}).catch(error => {
console.error('Login failed', error)
})
}
}注销处理
实现注销功能时需要清除认证信息并重定向到登录页。
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push({ name: 'Login' })
}
}动态路由
对于更复杂的权限系统，可以实现动态路由加载。根据用户权限动态添加路由。
// 在登录成功后
const userRoutes = generateRoutesBasedOnRole(user.role)
router.addRoutes(userRoutes)注意事项
- 认证令牌应使用安全的方式存储
- 敏感路由应在后端进行二次验证
- 考虑实现路由懒加载优化性能
- 对于SSR应用需要调整实现方式
