Vue项目的前端权限控制

本文主要介绍在Vue项目中如何进行前端权限控制。

路由权限

路由权限就是用户只能访问到自己有权限访问到的页面，对于无权限的页面可以跳转到404页面或者无权限提示。下面通过两种方式来实现对路由的权限控制。

1.动态生成路由表

第一种方式是动态生成路由表，前端原始的路由表中只保存一些基础的路由，获取权限之后根据用户拥有访问权限的路由信息构建一个路由表并动态添加进路由表中，这样就保证了无权限的路由根本没有被挂载，也就无法被访问。

该功能的实现主要使用了vue-router所提供的addRoute方法，通过该方法可以动态地往路由表中添加路由。下面看一下具体的实现。

// router.js
// 前端的路由表中只保留了首页和404的路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: () => import('@/views/Hello')
    }, {
      path: '*',
      name: '404',
      component: () => import('@/views/404')
    }
  ]
})

// main.js
import router from './router'
// 假设用户拥有的路由权限如下
const permission = [{
  name: 'page1',
  children: [{
    name: 'page1_child1'
  }, {
    name: 'page1_child2',
    children: [{
      name: 'page1_child2_child1'
    }]
  }]
}]
// 递归生成一个路由配置
function createRouteConfigByPermission (permission) {
  let routeConfig = []

  function walk (arr, parent) {
    arr.forEach((item) => {
      let { name, children } = item
      let { name: parentName, path: parentPath, children: parentChildren } = parent
      let path = `${parentPath || ''}/${name}`
      let route = routeFactory({
        path,
        name,
        children,
        parentName
      })
      if (children) {
        walk(children, route)
      }
      if (parentChildren) {
        parent.children.push(route)
      } else {
        parent.push(route)
      }
    })
  }
  walk(permission, routeConfig)
  return routeConfig
}
// 生成route的工厂函数，route包括path，name，component，children等属性
function routeFactory (options = {}) {
  let route = options
  let { name, children, parentName } = route
  parentName = parentName || name
  if (children) {
    route.children = []
  }
  route.component = () => import(`@/views/${parentName}/${name}`)
  return route
}

// 使用router.addRoutes添加路由表
router.addRoutes(createRouteConfigByPermission(permission))

另外一种思路是在前端存储一份完整的路由表，然后根据后端返回的权限信息进行筛选，调用addRoutes将筛选后的路由表添加即可，具体实现就不在这里详述了。

2.全局路由拦截

第二种进行路由权限控制的方式是使用全局的路由拦截，也就是在每次路由跳转时，对要跳转的路由进行判断，若用户有权限访问则成功跳转，否则就进行提示或者跳转到对应页面。

import router from './router.js'
// 用户权限
const permission = {
    '/page1': true,
    '/page1/page1_child1': true
}
router.beforEach((to, from, next) => {
    // 跳转的path存在权限表中则进行跳转
    if (permission.hasOwnProperty(to.path)) {
        next()
    } else {
        // 没权限跳转到404页面，或执行其他操作
        next('/404')
    }
})

组件权限

组件权限是指用户有没有权限查看或者操作页面中的组件，包括按钮、链接等。

指令控制

实现组件权限控制的方式只要实现一个通用的hasPermission指令即可。具体实现如下

// 用户权限
const permission = {
    '/class/add': true,
    '/class/edit': false
}
Vue.directive('hasPermission', {
    bind: function (el, binding, vnode) {
        if (!permission.hasOwnProperty(binding.value)) {
            el.parentNode.removeChild(el)
            // 也可以使用display:none
            // el.style.display = 'none'
        }
    }
})
// 使用
<template>
    <div>
      <el-button type="primary" v-has-permission="class/add">添加班级</el-button>
      <el-button type="primary" v-has-permission="class/edit">编辑班级</el-button>
    </div>
</template>

最后

进行前端的权限控制可以提高应用的安全性和用户的体验，但是并不能完全依赖前端，后端的权限控制才是最关键的。