在Vue.js中，Vue Router是一个非常重要的插件，用于实现前端的路由管理。除了基本的路由跳转功能外，Vue Router还可以用于实现前端的权限控制，保证用户在未登录或没有权限的情况下无法访问需要权限的页面。

安装和配置Vue Router

首先，我们需要安装Vue Router插件。在你的Vue项目根目录下，运行以下命令进行安装：

npm install vue-router

安装完成后，在你的Vue项目中创建一个router.js文件，用于配置Vue Router。在router.js文件中，需要导入Vue和Vue Router，并创建一个新的Router实例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

export default router

创建需要权限控制的路由

在Vue Router中，可以通过在路由配置中添加meta字段来实现权限控制。我们可以为需要权限控制的路由添加一个requiresAuth: true的字段，表示该路由需要用户登录才能访问。如果某个路由需要特定的权限才能访问，可以添加一个requiresPermission: 'xxx'的字段，表示该路由需要具备特定的权限才能访问。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true, requiresPermission: 'admin' }
  }
]

添加全局导航守卫

为了实现权限控制，我们可以通过在Vue Router中添加全局导航守卫来实现。全局导航守卫会在每次路由跳转时被调用，我们可以在其中判断用户是否已登录，并检查用户是否具备访问该路由的权限。

在router.js文件中，添加全局导航守卫：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 用户未登录，跳转到登录页面
    next({ path: '/login' })
  } else if (to.meta.requiresPermission && !hasPermission(to.meta.requiresPermission)) {
    // 用户没有权限，跳转到无权限页面
    next({ path: '/403' })
  } else {
    // 用户已登录且具备权限，正常访问路由
    next()
  }
})

function isAuthenticated() {
  // 判断用户是否已登录
  // 返回布尔值
}

function hasPermission(permission) {
  // 判断用户是否具备特定的权限
  // 返回布尔值
}

在上述代码中，isAuthenticated和hasPermission函数需要自行实现，用来判断用户是否已登录以及用户是否具备特定的权限。

在组件中使用权限控制

当用户登录成功时，我们可以将用户的权限信息保存在localStorage中。在需要权限控制的组件中，可以通过读取localStorage来获取用户的权限信息，并根据权限信息来渲染不同的内容。

export default {
  data() {
    return {
      hasAdminPermission: false
    }
  },
  mounted() {
    this.hasAdminPermission = localStorage.getItem('permission') === 'admin'
  }
}

在上述代码中，我们将用户的权限信息保存在hasAdminPermission变量中，通过在模板中使用v-if指令来控制渲染内容：

<template>
  <div>
    <div v-if="hasAdminPermission">
      <!-- 只有具备admin权限的用户才能看到的内容 -->
    </div>
    <div v-else>
      <!-- 普通用户能看到的内容 -->
    </div>
  </div>
</template>

通过上述步骤，我们就可以使用Vue Router实现前端路由管理与权限控制。用户在未登录或没有权限的情况下无法访问需要权限的页面，保证了系统的安全性。

本文来自极简博客，作者：技术解码器，转载请注明原文链接：使用Vue Router实现前端路由管理与权限控制