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()
  }
})

四、建议