Spring Boot +Vue+Spring Security (五):前后端权限控制

·  阅读 3351
Spring Boot +Vue+Spring Security (五):前后端权限控制

后端权限控制

1、每次请求时,都会带有tokenSpring Security会根据token判断用户信息,进行授权。
2、对于接口权限的控制,我们可以用过使用SpringEL表达式配合@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权限不足。


使用系统管理元测试结果,可以访问接口获取数据。

前端权限控制

1、由于本系统采用的是动态加载路由,所以如果当前用户的路由列表中没有你所输入访问的会转到404页面。
2、自定义权限判断方法。配合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的分页插件
1、首先引入依赖

    <!--github分页插件-->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.3</version>
    </dependency>
复制代码

2、在application.yml中配置PageHelper如下

    pagehelper:
      helperDialect: mysql
      reasonable: true
      supportMethodsArguments: true
      params: count=countSql
复制代码

3、建议封装一个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上了,如果你有任何的建议欢迎联系我~

欢迎关注我的个人微信公众号~

分类:
后端
标签:
分类:
后端
标签:
收藏成功!
已添加到「」, 点击更改