前端配合后端实现Vue路由权限的方法实例

下面我将为你详细讲解“前端配合后端实现Vue路由权限的方法实例”的完整攻略。

前言

在实际项目中，我们经常需要对系统菜单和路由进行权限控制。Vue路由权限控制是前端开发中非常常见的一种技术实现，下面我们就来介绍一下前端配合后端实现Vue路由权限的方法实例。

步骤

步骤一：在后端对菜单和路由进行权限控制

在后端实现对菜单和路由的权限控制是本次实现的核心。可以通过数据库存储用户以及用户权限信息，同时根据用户所拥有的权限动态生成可访问的路由和菜单。

步骤二：前端基于Vue Router实现路由权限控制

前端基于Vue Router实现路由权限控制，可以在路由跳转过程中进行用户权限的验证，以确保用户只访问具备访问权限的路由。如果用户没有权限访问当前路由，则需要重定向到指定的无权限访问页面。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'

Vue.use(Router)

const NotFound = () => import('@/views/NotFound')
const NoPermission = () => import('@/views/NoPermission')

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home'),
      meta: { requiresAuth: true }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About'),
      meta: { requiresAuth: true }
    },
    {
      path: '*',
      name: 'notFound',
      component: NotFound
    },
    {
      path: '/noPermission',
      name: 'noPermission',
      component: NoPermission
    }
  ],
  mode: 'history',
  base: process.env.BASE_URL
})

router.beforeEach((to, from, next) => {
  // 验证用户是否已经登录
  if (to.meta.requiresAuth && !store.state.user.isLogin) {
    next({ name: 'login', query: { redirect: to.fullPath } })
    return
  }

  // 验证用户是否具备访问此路由的权限
  if (to.meta.requiresAuth && !store.state.user.hasPermission(to.path)) {
    next({ name: 'noPermission' })
    return
  }

  next()
})

export default router

在上面的代码中，router.beforeEach是Vue Router提供的路由跳转钩子函数，在跳转路由之前进行权限验证，如果用户没有权限访问当前路由，则重定向到无权限访问页面。

步骤三：根据用户身份动态生成菜单

前端还需要根据用户的身份信息动态生成菜单，只有具备访问权限的菜单才应该被展示。

在Vue中，可以通过循环渲染来实现菜单的动态生成。具体实现方式如下：

<template>
  <div>
    <el-menu
      v-if="menuList.length"
      :collapse="isCollapse"
      router
      default-active="$route.path"
      :default-openeds="defaultOpeneds"
    >
      <el-submenu
        v-for="menu in menuList"
        :key="menu.path"
        :index="menu.path"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.title }}</span>
        </template>
        <el-menu-item
          v-for="item in menu.items"
          :key="item.path"
          :index="item.path"
        >
          {{ item.title }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    menuList() {
      // 过滤出用户有权限的菜单
      const menus = this.$store.state.menus.filter(menu => {
        return this.$store.state.user.hasPermission(menu.path)
      })

      // 组装菜单及其子项
      const result = []
      menus.forEach(menu => {
        const items = menu.children.map(item => ({
          path: item.path,
          title: item.title
        }))
        result.push({
          path: menu.path,
          title: menu.title,
          icon: menu.icon,
          items
        })
      })

      return result
    }
  }
}
</script>

在上面的代码中，通过computed属性实现动态菜单的渲染，只有当用户具备访问某个菜单的权限时，这个菜单才会被加入到菜单列表中，最后通过循环渲染菜单及其子项。

总结

通过后端控制路由和菜单，前端基于Vue Router实现路由权限控制，最后根据用户身份动态生成菜单，就可以实现前端配合后端实现Vue路由权限的方法。这个方法可以应用到任何Vue项目中，只需要按照上述步骤依次进行即可。