vue路由登录实现
路由登录实现的基本思路
在Vue项目中实现路由登录功能通常需要结合Vue Router和状态管理工具（如Vuex或Pinia）。核心逻辑是通过路由守卫（Navigation Guards）控制页面访问权限，未登录用户尝试访问受保护路由时重定向到登录页。
安装必要依赖
确保项目已安装vue-router。如果使用状态管理，需安装vuex或pinia：
npm install vue-router
npm install vuex # 或 pinia路由配置
在router/index.js中配置路由，标记需要认证的路由：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
meta: { requiresAuth: true } // 需要认证的标记
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})实现路由守卫
添加全局前置守卫检查用户认证状态：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 从localStorage或store获取
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login') // 重定向到登录页
} else {
next() // 放行
}
})登录逻辑实现
在登录组件中处理认证成功后跳转：
// Login.vue
methods: {
handleLogin() {
api.login(this.credentials).then(res => {
localStorage.setItem('token', res.data.token) // 存储token
this.$router.push('/') // 跳转到首页
})
}
}动态路由（可选）
对于角色权限系统，可动态添加路由：
// 登录成功后动态添加路由
api.getUserRoutes().then(routes => {
routes.forEach(route => {
router.addRoute(route)
})
})退出登录处理
清除认证信息并重定向：
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}使用状态管理（Vuex示例）
store/auth.js中维护登录状态：
export default {
state: () => ({
user: null,
token: null
}),
mutations: {
SET_USER(state, payload) {
state.user = payload
},
SET_TOKEN(state, payload) {
state.token = payload
}
}
}路由守卫改为检查store中的状态：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.auth.token) {
next('/login')
} else {
next()
}
})
