循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制(1)

由于用户相关的菜单、权限集合是在用户范畴里面，我们可以在UserApi里面定义对应的后端接口调用。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数。

UserApi的类文件user.js内容如下所示。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数，函数代码如下所示。

GetGrantedFunctionsByUser(id) { // 获取用户权限列表

return request({

url: this.baseurl + ‘GetGrantedFunctionsByUser’,

method: ‘get’,

params: { id }

})

}

在用户的Store/Modules/user.js里面，我们增加一个功能点的状态信息，如下所示。

然后在用户每次获取信息的时候，把它的功能点信息也存储起来，那么界面就可以根据这个存储内容进行相应的权限控制了。

在Mutation里面添加一个设置用户状态信息的函数，如下所示。

SET_PERMITS: (state, permits) => {

state.permits = permits

}

这样我们在用户信息获取的getInfo函数里面，就可以顺便一起获取用户的包含的权限功能点信息集合了。

// 获取用户信息

getInfo({ commit, state }) {

return new Promise((resolve, reject) => {

user.getInfo(state.userid).then(response => {

const { result } = response

…

commit(‘SET_ROLES’, { roles, roleNames })

commit(‘SET_NAME’, name)

commit(‘SET_INTRODUCTION’, fullName)

// 获取用户权限

user.GetGrantedFunctionsByUser(state.userid).then(data => {

var list = data.result.items

if (list) {

var permits = []

list.forEach(element => {

if (element && element.name && typeof (element.name) !== ‘undefined’) {

permits.push(element.name.toLowerCase()) // 小写

}

});

// 设置用户功能权限点

commit(‘SET_PERMITS’, permits)

}

})

resolve(result)

}).catch(error => {

reject(error)

})

})

},

现在前端也有这些权限功能点控制集合了，这些就是对应当前登录用户的可访问权限集合了。

接下来的就是需要根据这些权限集合，进行界面元素的控制了，如对一些操作按钮，如新增、编辑、删除、导入、导出等操作的按钮是否可以显示进行管理。

这个操作就是设计到Vue的自定义指令操作了，如不了解的自定义Directives的使用的，可以参考下官方介绍：https://cn.vuejs.org/v2/guide/custom-directive.html

如我们定义一个v-permit 的自定义指令来处理权限功能点的绑定处理，那么界面应该如下处理。

<el-button icon=“el-icon-search” type=“primary” size=“mini” round @click=“search()”>查询

<el-button icon=“el-icon-refresh-left” type=“warning” size=“mini” round plain @click=“resetSeachForm(‘searchForm’)”>重置

<el-button v-permit=“[‘User/add’]” icon=“el-icon-plus” type=“success” size=“mini” round @click=“showAdd()”>添加

<el-button v-permit=“[‘User/import’]” icon=“el-icon-upload2” type=“warning” size=“mini” round @click=“showImport()”>导入

<el-button v-permit=“[‘User/export’]” icon=“el-icon-download” type=“warning” size=“mini” round @click=“showImport()”>导出

通过类似 v-permit=“[‘User/add’]” 的方式操作，就可以指定这个操作按钮的功能点，如果用户具有这些功能点，那么就可以使用，否则就不显示了。

我们在directive目录中定义一个permit.js的自定义指令文件，用来进行相应的处理的。

然后在index.js的发布文件里面定义装载处理逻辑，如下代码所示:

import permit from ‘./permit’

const install = function(Vue) {

Vue.directive(‘permit’, permit)

}

if (window.Vue) {

window[‘permit’] = permit

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】