Customize the interface and set permission verification

Table of contents

1. The question leads

2. Examples

Front-end part:

Backend part:

3. Custom interface verification authority

Four. Summary

---

1. The question leads

   We all know that the premise of accessing many interfaces in Zoyi is to log in to the Zoyi account, but when we have not logged in to Zoyi, for example, the process of obtaining the verification code is completed before logging in, so let’s just cite one The functions in role management in the example SysRoleController can only be completed after logging in. It has an additional @PreAuthorize("@ss.hasPermi('system:role:list')") in the annotation in the process of obtaining the verification code. We can try to study the function of this annotation

2. Examples

We can try to click into the menu management module in Ruoyi's system management module to see the corresponding data permissions

Front-end part:

We can directly choose whether the role management module grants permission to a role

 Click the Modify column on the right of the corresponding role to modify the attributes and permissions

 Check it to grant and delete permissions.

We only give user ry permission to the system management module

Change another browser and log in with user ry to see how it works;

It can be seen that there is indeed only one system management module, that is, there are indeed fewer permissions;

Backend part:

We have reduced user ry permissions to only user management user query and user addition functions. No other modules are given;

 

It can be seen that there is indeed only one user query function and new functions and other functions are blocked; at the same time, the backend is also inaccessible;

 At this time, the front end reports an error "the current operation does not have permission".

---

At this point, we can probably know that the backend has passed the return value control permission of @ss.hasPermi('system:user:list');

Return true, indicating that it has authorization [Authorize], and can continue to visit
Return false, indicating that it does not have authorization and cannot continue to access

3. Custom interface verification authority

We can grant front-end access permissions in a format such as @PreAuthorize("@ss.hasPermi('system:xxx:xxx')");

We can customize a permission verification button in the student system;

First open the menu management and add a button in the student information management system

 

 In the front-end part, students/index.vue is added with the following code:

      <el-col :span="1.5">
        <el-button
          type="exposed"
          plain
          size="mini"
          @click="debugTest"
          v-hasPermi="['system:students:debug']"
        >权限验证</el-button>
      </el-col>

And add a click event for this newly generated button: debugTest

 debugTest(){
      alert("验证成功！");
    },

---

The backend is added in MystudentsController

@PreAuthorize("@ss.hasPermi('system:students:debug')")
    @GetMapping("/debug")
    public AjaxResult DEBUG(MyStudents myStudents){
        return AjaxResult.success("Debug is successful!");
    }

At this time, there is an additional permission verification button in the student information management system 

 Click the permission verification button 

 Verified that the permission was granted successfully!

Four. Summary

The role of menu permissions
Front-end: Control component display
Back-end: Control interface access
Back-end interface source code analysis
Use @PreAuthorize annotation
The function hasPermi in the annotation will determine whether the current user has the set permission

Permissions can be granted directly through Ruoyi's role management