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

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'] } //页面需要的权限
   }
  ]

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}

Then in main .js file import file

import has from './public/js/btnPermissions.js';

Just add v-has to the button on the page

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

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!