vue router实现登录
Vue Router 实现登录功能
配置路由守卫
在 Vue Router 中，可以使用导航守卫（Navigation Guards）来控制路由访问权限。全局前置守卫 beforeEach 可以检查用户是否登录，未登录则重定向到登录页面。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/login', component: () => import('@/views/Login.vue') },
{ path: '/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') // 检查登录状态
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login') // 需要登录但未登录，重定向到登录页
} else {
next() // 放行
}
})
export default router登录逻辑实现
在登录页面组件中，处理用户登录逻辑，成功后存储 token 并跳转到目标页面。
// views/Login.vue
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const username = ref('')
const password = ref('')
const handleLogin = async () => {
try {
// 调用登录API
const response = await loginApi(username.value, password.value)
localStorage.setItem('token', response.data.token) // 存储token
router.push('/dashboard') // 跳转到受保护页面
} catch (error) {
console.error('登录失败', error)
}
}
</script>动态路由加载
对于更复杂的权限系统，可以根据用户角色动态加载路由。
// 动态路由示例
function setupDynamicRoutes(userRole) {
const adminRoutes = [
{ path: '/admin', component: () => import('@/views/Admin.vue') }
]
if (userRole === 'admin') {
router.addRoute(adminRoutes[0]) // 添加管理员路由
}
}
// 登录成功后调用
setupDynamicRoutes(user.role)退出登录处理
实现退出功能时需要清除认证信息并重定向。
// 退出登录函数
const handleLogout = () => {
localStorage.removeItem('token') // 清除token
router.push('/login') // 跳转到登录页
}认证状态管理
对于大型应用，建议使用 Vuex 或 Pinia 集中管理认证状态。
// stores/auth.js (Pinia示例)
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
token: localStorage.getItem('token') || null
}),
actions: {
login(token) {
this.token = token
localStorage.setItem('token', token)
},
logout() {
this.token = null
localStorage.removeItem('token')
}
}
})这些方法组合起来可以构建完整的 Vue Router 登录认证系统，根据项目需求选择适合的方案。
