vue路由的使用与鉴权

在 Vue 项目中，使用 vue-router 实现路由管理是构建单页应用（SPA）的核心部分。结合 鉴权机制 可以实现登录验证、权限控制等常见业务需求。

---

一、Vue Router 基本使用

1. 安装

npm install vue-router@4

2. 配置路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'const routes = [{path: '/',name: 'home',component: HomeView,meta: { requiresAuth: true }},{path: '/login',name: 'login',component: LoginView}
]const router = createRouter({history: createWebHistory(),routes
})export default router

3. 挂载到 Vue 应用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

4. 使用 <router-view> 和 <router-link>

<template><div><nav><router-link to="/">首页</router-link> |<router-link to="/login">登录</router-link></nav><router-view /></div>
</template>

---

二、路由鉴权实现（登录验证 + 权限控制）

1. 路由元信息（meta）

通过 meta.requiresAuth 标记哪些页面需要登录才能访问。

{path: '/dashboard',name: 'dashboard',component: () => import('../views/Dashboard.vue'),meta: { requiresAuth: true }
}

2. 全局前置守卫（导航守卫）

// src/router/index.js
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token') // 示例：判断是否登录if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'login' }) // 未登录跳转登录页} else {next() // 正常跳转}
})

3. 动态添加路由（按角色权限加载不同页面）

// 用户登录后根据角色添加路由
router.addRoute({path: '/admin',name: 'admin',component: () => import('../views/Admin.vue'),meta: { roles: ['admin'] }
})

4. 组件内守卫（可选）

用于组件级别的控制：

export default {beforeRouteEnter(to, from, next) {// 进入前执行next()},beforeRouteUpdate(to, from, next) {// 当前路由变化时触发next()},beforeRouteLeave(to, from, next) {// 离开当前组件前确认操作const answer = window.confirm('确定要离开吗？')if (answer) next()else next(false)}
}

---

三、完整鉴权流程示例

1. 登录页面提交逻辑

// LoginView.vue
function login() {// 模拟请求登录接口api.login(username, password).then(res => {localStorage.setItem('token', res.token)localStorage.setItem('role', res.role)router.push('/')})
}

2. 路由守卫中校验角色

router.beforeEach((to, from, next) => {const token = localStorage.getItem('token')const role = localStorage.getItem('role')if (to.meta.requiresAuth && !token) {next('/login')} else if (to.meta.roles && !to.meta.roles.includes(role)) {next('/unauthorized') // 无权限页面} else {next()}
})

---

四、建议

场景	推荐做法
路由懒加载	使用 () => import('路径') 提升首屏加载速度
登录状态存储	使用 localStorage / vuex/pinia 存储 token/用户信息
权限控制	在路由 meta 中设置 roles，并在守卫中校验
未授权页面	添加 /unauthorized 页面提示权限不足
异步加载权限路由	登录后根据角色动态加载对应菜单