vue.js除了动态路由，前端权限还能够这么玩

索引

• 概述
• 基于指令
• 基于组件
• 权限的定义

概述

关于动态路由的相关处理，请参考本人的另外一篇文章vue.js先后端分离后台，该如何根据用户权限处理前端显示和后台接口访问，本文做为上一篇的续做
有时候仅处理菜单，是不够的，不少状况下，有读的权限，但无写的权限的时候，就须要更灵活的控制。也就是这篇文章的由来。

大概有两种方式能够使用：

1. 指令
2. 组件

基于指令

关于指令的使用，网上的文章比较多了，主要是操做DOM，把没有权限的元素从已渲染的画面里面删除。这里只是简单的出个示范，具体能够参考本身的受权系统开发：

import Vue from 'vue'
// import Store from '../store/'

const directives = {
  role: {
    // 指令的定义 (TBD：有没有before'inserted'这样的钩子函数用？)
    inserted: (el, binding, vnode) => {
      // 权限
      if (binding.value && [处理权限的断定]) {
        el.parentElement.removeChild(el)
      }
    }
  }
}

Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

<el-button type="success" icon="el-icon-document" size="small" v-role="xxx-upload"
                   @click="$router.push({name: 'music-album-multi-upload'})">上传
        </el-button>

基于组件

不肯定对于vue组件，有没有全局的生命周期钩子，若是有的话，处理起来就更方便了。
下面就以普通的组件形式来讲明下处理过程：

写一个全局的组件，注册为v-sec，其中参数code为访问当前画面segment的受权码。

<template>
  <div>
    <slot v-if="permitted"></slot>
  </div>
</template>

<script>
  import vuet from '@/vuet/'

  export default {
    name: "sec",
    props: {
      code: {
        type: String,
        required: true,
        default: 'text'
      },
    },
    data() {
      return {
        permitted: false
      }
    },
    beforeCreate() {
      let userSelf = vuet.getModule('user-self')
      if (userSelf /* && userSelf.secCodes && userSelf.secCodes.contains(this.code) */) {
        this.$nextTick(function () {
          this.permitted = true
        })
      }
    }
  }
</script>

而后在画面上使用

<v-sec code="xxx-add">
  <el-button type="success" icon="el-icon-document" size="small"
             @click="$router.push('/sys/module/add')">添加
  </el-button>
</v-sec>

与指令的那种方式在使用方面差很少，若是组件的这种方式能避免内嵌的组件被渲染，那效果会比指令的那种好一些。

接下来，在项目只可能就两种方式分别作实验。

权限的定义

画面

通常经过导航+动态路由能控制住的，像画面和菜单。
而后配合路由的全局函数router.beforeEach基本上比较好实现。
为了配合动态路由，须要指定如下几个字段

• 路径，用于画面跳转，
• 组件名/文件地址，用于路由生成，指向实际的vue文件（咱们能够约定-代替路径分隔符:common-main=/src/pages/common/main.vue）
• 画面名，用于显示，导航或Title等地方须要
• icon，有一些样式库里有这个，做为可选项
• show_nav，是否显示在导航中，有一些画面须要参数的话，不可以直接从导航进入，可区分开

页面片断

基本上标记个名字，与画面关联起来以便于管理就能够了。
而后配置后台管理系统，能够经过先经过后台录入画面及画面片断，而后用程序生成对应的vue文件及部分代码。这样子开发效率是否是高一些？

• 画面ID
• 片断编码，不直接使用DB的ID自增，以免在不一样的系统间数据迁移时的问题。
• 片断名，在受权画面展现以方便管理

受权

受权时，把画面和画面片断与角色关联便可，而后用户在登陆后获取到角色，再从内存/DB/缓存中把角色对应的画面和菜单等权限查出，合并到一块儿返回给vue。vue拿到数据后，缓存到localstorage以免画面的刷新(f5/浏览器刷新)后出现404的问题，这一点在上一篇里面已经说明过了。