vue2+vue3后台管理之路由鉴权

在常见的后台管理项目中必定有的路由权限的相关问题，那么今天我们就来手膜手教程实现管理后台的路由鉴权，分别区分vue2和vue3分别的实现方式，那就直接上干货

Vue2

在Vue 2.x中实现路由鉴权，主要通过vue-router的导航守卫（navigation guards）来完成。下面是一个具体的实现步骤：

1. 安装并配置 vue-router

首先确保已经安装了vue-router，如果尚未安装，可以通过npm或yarn进行安装：

npm install vue-router
# 或者
yarn add vue-router

然后，在项目的src目录下创建一个router文件夹，并在其中创建index.js文件来配置路由：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import Login from '../components/Login'
import Dashboard from '../components/Dashboard'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { 
      path: '/dashboard', 
      name: 'Dashboard', 
      component: Dashboard, 
      meta: { requiresAuth: true } // 添加元信息表示需要鉴权
    }
  ]
})

2. 使用全局前置守卫进行鉴权

在router/index.js中，你可以利用全局前置守卫（beforeEach）来检查用户的登录状态，并据此决定是否允许其访问特定路由。

// router/index.js
...
const router = new Router({ ... })

// 导航守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断是否已登录，这里简单示例使用localStorage存储的token
    const isAuthenticated = localStorage.getItem('token')
    if (!isAuthenticated) {
      // 未登录则重定向到登录页面
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      // 已登录，允许访问
      next()
    }
  } else {
    // 不需要鉴权的直接放行
    next()
  }
})

export default router

3. 登录逻辑处理

在登录组件中，当用户成功登录后，你需要将认证信息（如JWT token）保存在客户端（通常是localStorage或sessionStorage），并在后续请求中携带这些信息以验证用户身份。

注意事项

• 上述示例中使用了简单的localStorage检查来模拟用户登录状态，实际项目中你可能需要更复杂的鉴权逻辑，比如通过API调用验证Token的有效性。
• 确保在用户登出时清除存储的认证信息，避免已登出用户继续访问需要权限的页面。
• 根据项目需求，你还可以实现角色级别的权限控制，即不同用户角色能访问的路由不同，这需要在路由的meta信息中添加更多细节，并在守卫中进行相应的逻辑判断。

Vue3+vite

在Vue 3中使用Vite搭建应用时，实现路由鉴权的过程与使用Vue CLI构建的项目类似，主要依赖vue-router库。以下是使用Vue 3、Vite和vue-router实现路由鉴权的步骤：

1. 安装并配置 vue-router

首先确保你已经安装了Vite和Vue 3，然后安装vue-router：

npm init vite@latest
# 或者
yarn create vite
# 进入项目目录
cd my-vue3-app
npm install vue-router@next

在src目录下创建router文件夹，然后创建index.js或index.ts来配置路由：

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/login', name: 'Login', component: Login },
  { 
    path: '/dashboard', 
    name: 'Dashboard', 
    component: Dashboard, 
    meta: { requiresAuth: true } // 添加元信息表示需要鉴权
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

2. 使用全局前置守卫进行鉴权

在src/router/index.js中，你可以利用全局前置守卫（beforeEach）来检查用户的登录状态：

// src/router/index.js
import { useStore } from 'vuex' // 假设你使用了Vuex
import { nextTick } from 'vue'

// 获取Vuex Store
const store = useStore()

router.beforeEach(async (to, from, next) => {
  await nextTick() // 确保在DOM更新后再执行
  if (to.meta.requiresAuth) {
    const isLoggedIn = store.getters.isLoggedIn
    if (!isLoggedIn) {
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  } else {
    next()
  }
})

3. 登录逻辑处理

在登录组件中，当用户成功登录后，将认证信息（如JWT token）保存在客户端（通常是localStorage或sessionStorage），并更新Vuex Store中的登录状态。

4. 鉴权逻辑的优化

• 可以考虑使用异步守卫，以便在登录状态检查之前先处理一些异步操作，例如从服务器获取用户信息。
• 如果有多个守卫，可以使用beforeResolve守卫，它会在所有组件钩子和异步操作完成后触发，确保了所有资源都已加载。
• 在用户登出时，清除存储的认证信息，并更新Vuex Store中的登录状态。

以上就是在Vue 3和Vite中实现路由鉴权的基本步骤。请注意，实际项目中你可能还需要处理更多细节，例如错误处理、角色级别的权限控制等。