Preface: those things about authority!!

Route permission can refer to the god wrote, very comprehensive ==> hand touch hand, take you to use vue masturbation background series two (login permission)

Ideas:

  • Login: After the user fills in the account and password, the server verifies whether it is correct. After the verification is successful, the server will return a token. After getting the token (I will store the token in sessionStorage to ensure that the login status of the user can be remembered after refreshing the page), The front-end will then pull a user_info interface based on the token to obtain user details (such as user permissions, user names and other information).
  • Permission verification: Obtain the user’s corresponding role through token, customize the command, and obtain btnPermissions in the meta attribute of the route.BtnPermissions is an array of button permissions, configured in the routing table), and then check whether the role is in the btnPermissions array, if not delete the button DOM immediately.

V-if can also be used to determine button permissions. However, if there are too many pages, each page needs to obtain user permission role and meta. BtnPermissions in the routing table, and then make the judgment, which feels a bit troublesome.

Without further ado, the code…

Route configuration:

Path: '/ Permission ', Component: Layout, name: 'Permission test ', meta: {btnPermissions: ['admin','supper','normal']}, // children: [{path: 'supper', Component: _import('system/supper'), name: Meta: {btnPermissions: ['admin','supper']}, {path: 'normal', Component: _import('system/normal'), name: 'permissions ', meta: {btnPermissions: ['admin']}Copy the code

Custom instruction:

Import Vue from 'Vue' /** Permission **/ const has = Vue. Directive ('has', {bind: Function (el, binding, vnode) {function (el, binding, vnode) {let btnPermissionsArr = []; If (binding. Value) {/ / if the instruction value, obtain instruction parameters, according to the order parameter and current login button permissions. btnPermissionsArr = Array.of(binding.value); }else{// Otherwise get the parameters in the route and compare them according to the btnPermissionsArr of the route and the current login button permission. btnPermissionsArr = vnode.context.$route.meta.btnPermissions; } if (! Vue.prototype.$_has(btnPermissionsArr)) { el.parentNode.removeChild(el); }}}); 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 the code

Then import the file in main.js


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

Copy the code

The button on the page just needs to add v-has

<el-button @click='editClick' type="primary" v-has>Copy the code

Conclusion:

Permissions this kind of thing needs to combine the front and back end, the front end as much as possible to control, more need to background judgment. Remember: Never trust user input!

Welcome to comment on the above shortcomings!!

Thanks to the gods in the comments section for their friendly suggestions, which have been adopted. This article has been updated (2019-12-09). Thanks again!