vue路由实现登录
Vue 路由实现登录功能
在Vue项目中，通常使用Vue Router结合状态管理（如Vuex或Pinia）来实现登录认证和路由守卫功能。以下是实现登录功能的核心步骤：
安装Vue Router
确保项目已安装Vue Router。若未安装，通过以下命令安装：
npm install vue-router配置路由文件
在src/router/index.js中定义路由，区分公开路由和受保护路由：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue'),
meta: { requiresAuth: false } // 标记为公开路由
},
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true } // 标记为需登录
}
]
const router = createRouter({
history: createWebHistory(),
routes
})实现路由守卫
在路由配置中添加全局前置守卫，检查用户是否已登录：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 或从Vuex/Pinia获取
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login') // 重定向到登录页
} else if (to.path === '/login' && isAuthenticated) {
next('/dashboard') // 已登录用户禁止访问登录页
} else {
next() // 正常放行
}
})登录逻辑实现
在登录页面（如Login.vue）中处理用户认证：
import { useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
setup() {
const router = useRouter()
const username = ref('')
const password = ref('')
const handleLogin = async () => {
try {
// 模拟API调用
const response = await fakeAuthAPI(username.value, password.value)
localStorage.setItem('token', response.token)
router.push('/dashboard') // 登录成功后跳转
} catch (error) {
alert('登录失败')
}
}
return { username, password, handleLogin }
}
}状态管理集成
结合Vuex或Pinia管理登录状态（以Pinia为例）：
- 创建auth store：
// stores/auth.js import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', { state: () => ({ user: null, isAuthenticated: false }), actions: { login(token) { this.isAuthenticated = true localStorage.setItem('token', token) }, logout() { this.isAuthenticated = false localStorage.removeItem('token') } } })
2. 在路由守卫中使用store：
```javascript
import { useAuthStore } from '@/stores/auth'
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isAuthenticated) {
return '/login'
}
})动态路由加载
对于权限复杂的系统，可动态加载路由：
// 在登录成功后添加权限路由
const adminRoutes = [
{ path: '/admin', component: AdminPanel }
]
authStore.login().then(() => {
adminRoutes.forEach(route => router.addRoute(route))
})退出登录处理
实现退出功能时清除状态和跳转：
const handleLogout = () => {
authStore.logout()
router.push('/login')
}注意事项
- 前端路由保护只是基础安全措施，后端必须对每个API请求进行权限验证
- 敏感路由建议使用JWT等机制进行双重验证
- 生产环境应使用HTTP-only Cookie存储token而非localStorage
- 考虑添加路由过渡效果提升用户体验
