Spring Boot +Vue+Spring Security （五)：先後端權限控制

後端權限控制

一、每次請求時，都會帶有token，Spring Security會根據token判斷用戶信息，進行受權。
二、對於接口權限的控制，咱們能夠用過使用Spring的EL表達式配合@PreAuthorize("hasAnyRole('ADMIN')")註解來對接口進行權限控制，這段註解表示，只有當前用戶的角色爲ADMIN的時候，Spring Security纔會放行。注意：建議使用ROLE_*的方式存放在數據庫中用來規定角色名。

    @PreAuthorize("hasAnyRole('ADMIN')")
    @RequestMapping(value = "/getRoleList",method = RequestMethod.POST)
    public RetResult getRoleList(@RequestBody  Map<String,Object> map){
        //...
    }
複製代碼

Example

使用本系統的系統管理員和測試用戶分別使用Postman測試，這是測試用戶訪問進行訪問時，會拋出AccessDeniedException權限不足。

使用系統管理元測試結果,能夠訪問接口獲取數據。

前端權限控制

一、因爲本系統採用的是動態加載路由，因此若是當前用戶的路由列表中沒有你所輸入訪問的會轉到404頁面。
二、自定義權限判斷方法。配合v-if指令來進行驗證。

建立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: '須要角色權限列表',
          type: 'error'
        })
        return false
      }
    }
複製代碼

解釋一下：就是從Vuex中拿到角色，而後與頁面中定義的權限角色進行判斷，若是包含的話就能夠訪問。

    <template slot-scope="scope">
      <el-popover
        //在這裏使用v-if進行判斷就行
        v-if="hasPermission(['ROLE_ADMIN'])"
        :ref="scope.row.id"
        placement="top"
        width="180">
        <p>肯定刪除本條數據嗎？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
          <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">肯定</el-button>
        </div>
        <el-button slot="reference" :disabled="scope.row.id === 1" type="danger" size="mini">刪除</el-button>
      </el-popover>
    </template>
    ...

    <script>

    import hasPermission from '@/utils/permission'

    ...

    methods: {
        hasPermission,
    }
複製代碼

這樣能夠對按鈕，或者頁面中的一部分頁面進行權限控制了~

GitHub分頁插件

再說一下Spring Boot中使用Github的分頁插件
一、首先引入依賴

    <!--github分頁插件-->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.3</version>
    </dependency>
複製代碼

二、在application.yml中配置PageHelper以下

    pagehelper:
      helperDialect: mysql
      reasonable: true
      supportMethodsArguments: true
      params: count=countSql
複製代碼

三、建議封裝一個PageUtil，緣由是一般Vue前端分頁須要咱們傳遞當前頁:pageNum,頁大小:pageSize,總數量pageTotal等參數。

    package com.example.security.util;

    import com.github.pagehelper.Page;
    import lombok.Data;

    import java.util.List;

    /**
     * @Autoor:楊文彬
     * @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;
        }
    }
複製代碼

返回數據的格式

而後在前端渲染數據就ok了。目前作了角色管理頁面，其中也對角色操做一欄使用 hasPermission進行了權限控制。代碼已經同步到 Github上了，若是你有任何的建議歡迎聯繫我~

歡迎關注個人我的微信公衆號~