Back-end permission control

1. Each request will carry a token. Spring Security will judge the user information according to the token and authorize the user. 2, For the control of interface permissions, we can use the Spring EL expression with @preauthorize (“hasAnyRole(‘ADMIN’)”) annotation to control the interface permissions. This annotation indicates that only when the current user’s role is ADMIN, Spring Security will release it. Note: It is recommended that ROLE_* be stored in the database to specify the role name.

    @PreAuthorize("hasAnyRole('ADMIN')")

    @RequestMapping(value = "/getRoleList",method = RequestMethod.POST)

    public RetResult getRoleList(@RequestBody  Map<String.Object> map){

        / /...

    }

Copy the code

Example

System administrators and test users using this system respectively use Postman test, which is to test user access to access, will throw AccessDeniedException insufficient permission.

Using the system management meta-test results, you can access the interface to retrieve data.

Front-end access control

1, because the system uses dynamic load routing, so if the current user’s route list does not have you will be transferred to the 404 page. 2. Customize permission judgment methods. Verify with V-IF instruction.

Create the SRC \ utils \ permission. Js

    import store from '@/store'



    export default function hasPermission(value) {

      if (value && value instanceof Array && value.length > 0) {

        const roles = store.getters && store.getters.roles

        const permissionList = value



        const isPermission = roles.some(role= > {

          return permissionList.includes(role.rolename)

        })

        if(! isPermission) {

          return false

        }

        return true

      } else {

        this.$message({

          message: 'Required Role Permissions List'.

          type: 'error'

        })

        return false

      }

    }

Copy the code

To explain: get the role from Vuex, and then with the page defined by the authority role to judge, if included, you can access.

    <template slot-scope="scope">

      <el-popover

// Use it herev-ifJust judge

        v-if="hasPermission(['ROLE_ADMIN'])"

        :ref="scope.row.id"

        placement="top"

        width="180">

        <p>Are you sure to delete this data?</p>

        <div style="text-align: right; margin: 0">

          <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">cancel</el-button>

          <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">determine</el-button>

        </div>

        <el-button slot="reference" :disabled="scope.row.id === 1" type="danger" size="mini">delete</el-button>

      </el-popover>

    </template>

.



    <script>



    import hasPermission from '@/utils/permission'



.



    methods: {

        hasPermission,

    }

Copy the code

This allows you to control the permissions of buttons, or parts of a page

GitHub paging plugin

Spring Boot uses Github as a pagination plugin

    <! -- Github paging plugin -->

    <dependency>

        <groupId>com.github.pagehelper</groupId>

        <artifactId>pagehelper-spring-boot-starter</artifactId>

        <version>1.2.3</version>

    </dependency>

Copy the code

2. Configure PageHelper in application.yml as follows

    pagehelper:

      helperDialect: mysql

      reasonable: true

      supportMethodsArguments: true

      params: count=countSql

Copy the code

3, it is recommended to encapsulate a PageUtil, because usually Vue front-end paging requires us to pass the current page :pageNum, pageSize :pageSize, total number of pageTotal and other parameters.

    package com.example.security.util;



    import com.github.pagehelper.Page;

    import lombok.Data;



    import java.util.List;



    / * *

     * @Autoor: wen-bin Yang

     * @Date: 2019/1/21

     * @Description:

* /

    @Data

    public class PageUtil {

        private Integer pageCur;

        private Integer pageSize;

        private Integer rowTotal;

        private Integer pageTotal;

        private List data;



        public PageUtil(Page page,List data) {

            this.pageCur = page.getPageNum();

            this.pageSize = page.getPageSize();

            this.rowTotal = page.getPages();

            this.pageTotal = Integer.valueOf((int)page.getTotal());

            this.data = data;

        }

    }

Copy the code

The format of the returned data

Then render the data in the front end and it’s ok. Currently do the role management page, which is also used for the role operation column
hasPermissionAccess control is carried out. The code has been synchronized to
GithubPlease feel free to contact me if you have any suggestions