Spring Security+JWT+Vue 集成及权限认证（二）-阿里云开发者社区

管理员权限控制

ROLE_ADMIN 角色 controller

/**
 *  管理
 * @author vnjohn
 * @since 2022-12-12
**/
@RestController
@RequestMapping("/admin")
public class AdminController {
    @Autowired
    private SysUserService sysUserService;
    @Autowired
    private SysRoleService sysRoleService;
    @Autowired
    private SysMenuService sysMenuService;
    /**
     * 查询管理端信息
     **/
    @PreAuthorize("hasRole('ADMIN')")
    @GetMapping("/info")
    public Map<String,Object> userLogin(){
        Map<String,Object> result = new HashMap<>();
        SelfUserEntity userDetails = SecurityUtil.getUserInfo();
        result.put("title","管理端信息");
        result.put("data",userDetails);
        return ResultUtil.resultSuccess(result);
    }
    /**
     * 拥有 ADMIN 或 USER 角色可以访问
     **/
    @PreAuthorize("hasAnyRole('ADMIN','USER')")
    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public Map<String,Object> list(){
        Map<String,Object> result = new HashMap<>();
        List<SysUserEntity> sysUserEntityList = sysUserService.list();
        result.put("title","拥有用户或者管理员角色都可以查看");
        result.put("data",sysUserEntityList);
        return ResultUtil.resultSuccess(result);
    }
    /**
     * 拥有 ADMIN、USER 角色可以访问
     **/
    @PreAuthorize("hasRole('ADMIN') and hasRole('USER')")
    @RequestMapping(value = "/menuList",method = RequestMethod.GET)
    public Map<String,Object> menuList(){
        Map<String,Object> result = new HashMap<>();
        List<SysMenuEntity> sysMenuEntityList = sysMenuService.list();
        result.put("title","拥有用户和管理员角色都可以查看");
        result.put("data",sysMenuEntityList);
        return ResultUtil.resultSuccess(result);
    }
    /**
     * 拥有 sys:user:info 权限可以访问
     */
    @PreAuthorize("hasPermission('/admin/userList','sys:user:info')")
    @RequestMapping(value = "/userList",method = RequestMethod.GET)
    public Map<String,Object> userList(){
        Map<String,Object> result = new HashMap<>();
        List<SysUserEntity> sysUserEntityList = sysUserService.list();
        result.put("title","拥有sys:user:info权限都可以查看");
        result.put("data",sysUserEntityList);
        return ResultUtil.resultSuccess(result);
    }
    /**
    * 拥有 ADMIN 角色、sys:role:info 权限可以访问
    **/
    @PreAuthorize("hasRole('ADMIN') and hasPermission('/admin/adminRoleList','sys:role:info')")
    @RequestMapping(value = "/adminRoleList",method = RequestMethod.GET)
    public Map<String,Object> adminRoleList(){
        Map<String,Object> result = new HashMap<>();
        List<SysRoleEntity> sysRoleEntityList = sysRoleService.list();
        result.put("title","拥有ADMIN角色和sys:role:info权限可以访问");
        result.put("data",sysRoleEntityList);
        return ResultUtil.resultSuccess(result);
    }
}

普通用户权限控制

ROLE_USER 角色 controller

/**
 * 普通用户
 * @author vnjohn
 * @since 2022-12-12
**/
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private SysMenuService sysMenuService;
    /**
     * 用户端信息
     **/
    @RequestMapping(value = "/info",method = RequestMethod.GET)
    public Map<String,Object> userLogin(){
        Map<String,Object> result = new HashMap<>();
        SelfUserEntity userDetails = (SelfUserEntity) SecurityContextHolder.getContext().getAuthentication() .getPrincipal();
        result.put("title","用户端信息");
        result.put("data",userDetails);
        return ResultUtil.resultSuccess(result);
    }
    /**
     * 拥有 USER 角色、sys:user:info 权限可以访问
     **/
    @PreAuthorize("hasRole('USER') and hasPermission('/user/menuList','sys:user:info')")
    @RequestMapping(value = "/menuList",method = RequestMethod.GET)
    public Map<String,Object> sysMenuEntity(){
        Map<String,Object> result = new HashMap<>();
        List<SysMenuEntity> sysMenuEntityList = sysMenuService.list();
        result.put("title","拥有USER角色和sys:user:info权限可以访问");
        result.put("data",sysMenuEntityList);
        return ResultUtil.resultSuccess(result);
    }
}

Vue 引入流程

前言

本篇简单的介绍 Vue 简单使用，主要为了测试验证与后端接口的权限功能是否能正常使用

安装 Node.js

1.进入Node.js 官网:https://nodejs.org/en/

下载完成以后得到**.msi**文件下一步下一步安装好即可

安装完成以后，按 windows+r 打开命令行，输入「node -v、npm -v」查看是否有出现版本标识，node 自带 npm，如下:

3.安装 cnpm

执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ,使用 npm 国内镜像（npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的 npm 命令，增加依赖包加载速度且避免资源限制

4.cnpm 安装脚手架 vue-cli

在命令行中运行命令 cnpm install -g vue-cli 安装脚手架

5.将 Vue 项目建立在电脑的其他磁盘下，使用 E: 进入 E 盘，cd vue-workspace 进入 E:\vue-workspace

在输入新建项目命令：vue init webpack javalsj-vue，完成以後：

切换到刚刚所安装的项目目录，此时的项目是不能够启动的，我们需要将项目对应的依赖给安装起来，使用 cnpm install :

以上成功以后，运行命令 npm run dev

访问 localhost:8081，至此：安装成功

构建 Vue 登录页面及 Cookie 存取

如上图新建一个 views 目录存放我们所新建的 vue 文件

BlogHeader.vue

该header内容后面要引入到每个页面中

<template>
  <div>
    页面头部
  </div>
</template>
<script>
  export default{
    name:"BlogHeader"
  }
</script>
<style>
</style>

BlogFooter.vue

把 footer 内容引入到每个页面中

<template>
  <div>
    页面尾部
  </div>
</template>
<script>
  export default{
    name:"BlogFooter"
  }
</script>
<style>
</style>

BlogLogin.vue

该login登录页

<template>
  <div>
    <!-- 头部的内容 第二个字母大写可以用-代替   对应下面import的blogHeader-->
    <blog-header></blog-header>
    <hr />
    <form>
      <div>
        用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
        <br />
        密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
        <br />
        <button v-on:click="login">登录</button>
        <br />
        登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>
      </div>
    </form>
    <hr />
    <!-- 尾部的内容 第二个字母大写可以用-代替  对应下面import的blogFooter-->
    <blog-footer/>
  </div>
</template>
<script>
  import blogHeader from '@/views/BlogHeader.vue'
  import blogFooter from '@/views/BlogFooter.vue'
  import {setToken} from '@/router/auth.js'  //auth.js
  import {getToken} from '@/router/auth.js'  //auth.js
  export default {
    name: 'login',
    // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
    components: {
      blogHeader,
      blogFooter
    },
    data() {
      return {
        loginInfoVo: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login() {
        this.$axios
        //该接口是我们JAVA后端中在security中配置好的form 表单提交的页面 
        //此处使用拼接的方式而不是放入data的方式,这是一个值得注意的地方
        // security下的源码默认的是POST请求,但是它使用的是request.getParameter(name)的方式
        //来获取我们输入的用户和密码的 以致我们需要拼接进URL参数 后端的security才能识别出来
          .post('/myLoginForm?userName=' + this.loginInfoVo.username + "&passWord=" + this.loginInfoVo.password)
          .then(res => {
            if (res.data.code == 200) {
              console.log(res.data.msg)
              console.log(res.data.token)
              setToken(res.data.token)
              console.log("获得token为:" + getToken().token)
              this.$router.push("/index")//登录成功以后 跳转index页面
            }
            this.responseResult = JSON.stringify(res.data)
          })
          .catch(failResponse => {})
      }
    }
  }
</script>

以上 Security 处理的方式是这样的，在我们的UsernamePasswordAuthenticationFilter 类下：

第一步：将 request 对象放入获取参数里头

第二步:通过 request.getParameter() 方法获得参数以后不能使用 POST 请求数据放 data 里的方式，而只能使用 POST 请求后加参数拼接的方式传入后端才能识别

auth.js、index.js

auth.js(全局 header 存入、token 获取) & index.js(存放路由)

router 目录下两个比较重要的 js 文件，index.js 是存放我们页面的路由(访问地址)的地方 auth.js 是存入后端访问的 token 值存入 cookie 的地方，以便前端每次请求后端的时候都携带上对应的 token 被我们后端所配置 JwtFilter 扫描到，内容如下:

auth.js内容

import Cookies from 'js-cookie'   //引入这个 需要在命令行下 cpm install js-cookie 
import axios from 'axios'
const TokenKey = 'Authorization' //该TokenKey是需要和后端配置的一样的 上面后端流程中 yml中有配置这个
export function setToken(token) {
  Cookies.set(TokenKey, token) //存入cookie
  // 创建axios实例  全局加入header
  axios.defaults.headers.common['Authorization'] = token
}
export function getToken() {
    return {
        token: Cookies.get(TokenKey)
    }
}

Spring Security+JWT+Vue 集成及权限认证（二）

管理员权限控制

普通用户权限控制

Vue 引入流程

前言

安装 Node.js

构建 Vue 登录页面及 Cookie 存取

BlogHeader.vue

BlogFooter.vue

BlogLogin.vue

auth.js、index.js

热门文章

最新文章

相关课程

相关电子书