Controls whether page buttons and forms can only be viewed and edited according to user permissions

is that if the user only has the right to view the content, then all the page buttons and forms in the system are set to read-only vue and iview for the
project. Is there any convenient operation? Thank you

Jan.30,2022

if you are in trouble, the user must know the permissions after logging in, the buttons and forms are set to read-only, and all event triggers are added to the user's rights. For example, the editing event of a coupon is

.
couponFunc () {
  if (sessionStorage.userPower != 1) { //1
      ...
  }
}

this must be troublesome, but I think when you said, 'all page buttons and forms are set to read-only', you can click on the navigation bar on your left, either he is not read-only, he can only see the data on the first screen, and cannot do any switching
, so another way is to add a model layer on the right side of the navigation bar (data display part), when the user permission is read-only

.

A tricky solution: add a style class to the outermost layer of the structure, which determines whether you have or does not have user rights. Classes that do not have permissions use css style to prohibit page operations. Be sure to make sure that this class is at the highest level of the scope you do not want him to click on, and that functions that you do not want to disable are not included in its structure:

// template
:class="{'non-authority': !authority}"

// script
this.authority = true/false

// style
.non-authority {
  pointer-events: none;
}

you can also control whether it can be edited by setting the associated variable of disabled or readonly for each control. But it's a little more troublesome.


user permissions are stored in store, and then the buttons and forms are encapsulated. For example, PermissionButton, removes the permission settings from store to be read-only and writable


I personally suggest you to communicate with the backend and write an empowerment function on your management page. When you log in, encapsulate the ID of all permissions of the current user into an array and store them in store. For example: rule: [], and then you write a global method, such as checkCode (val) {}, in which you determine whether your passed value exists in rule, and return true, if it exists, otherwise false, in your child page just need to determine whether checkCode (the node value of the current button) is true,

Menu