Home > Web Front-end > JS Tutorial > body text

Method to implement button-level permission control based on Vue custom instructions

不言
Release: 2018-07-04 11:03:59
Original
2473 people have browsed it

This article mainly introduces the implementation of button-level permission control based on vue custom instructions. This article introduces it to you in great detail. Friends who are interested can learn together.

Ideas:

  • Login: When the user fills in the account number and password, verify with the server whether they are correct. After the verification is passed, the server will return a token. After getting the token ( I will store this token in sessionStorage to ensure that the user login status can be remembered after refreshing the page). The front end will pull a user_info interface based on the token to obtain the user's detailed information (such as user permissions, user name, etc. information).

  • Permission verification: Obtain the user's corresponding role through token, customize instructions, and obtain btnPermissions in the routing meta attribute (Note: meta.btnPermissions is an array storing button permissions, in configured in the routing table), and then determine whether the role is in the btnPermissions array. If not, delete the button DOM.

Button permissions can also be determined using v-if, but if there are too many pages, each page must obtain the user permission role and meta in the routing table. .btnPermissions, and then make a judgment, which feels a bit cumbersome. As for custom instructions, you only need to add the instruction to the permission button.

Without further ado, here’s the code...

Routing configuration:

path: '/permission',
  component: Layout,
  name: '权限测试',
  meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin'] } //页面需要的权限
   }
  ]
Copy after login

Custom instructions:

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}
Copy after login

Then in main .js file import file

import has from './public/js/btnPermissions.js';
Copy after login

Just add v-has to the button on the page

<el-button @click=&#39;editClick&#39; type="primary" v-has>编辑</el-button>
Copy after login

Conclusion:

Permissions require a combination of front-end and front-end control as much as possible. Remember: always Don't trust user input!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Vue’s method of using Redux

##Vue mui implements local caching of images

Introduction to the method of vue routing interception and page jump settings

The above is the detailed content of Method to implement button-level permission control based on Vue custom instructions. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template