Spring Security+JWT+Vue 集成及权限认证(二)

简介: 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)
    }
}


目录
相关文章
|
23天前
|
安全 Java 数据库
后端进阶之路——万字总结Spring Security与数据库集成实践(五)
后端进阶之路——万字总结Spring Security与数据库集成实践(五)
|
23天前
|
安全 Java 网络安全
后端进阶之路——综述Spring Security认证,授权(一)
后端进阶之路——综述Spring Security认证,授权(一)
|
26天前
|
NoSQL Java Redis
Spring Boot集成Redisson详细介绍
Redisson是一个用于Java的分布式和高可用的Java对象的框架,它基于Redis实现。在Spring Boot应用程序中集成Redisson可以帮助我们更轻松地实现分布式锁、分布式对象、分布式集合等功能。本文将介绍如何在Spring Boot项目中集成Redisson,并展示一些基本用法。
328 2
Spring Boot集成Redisson详细介绍
|
30天前
|
安全 Java Spring
Spring Security OAuth 资源服务器认证浅析
【1月更文挑战第18天】之前的几篇文章介绍了如何进行用户认证并向客户端分发 Token,以及 Token 是如何生成的,这篇分析一下,当客户端拿着 Token 去访问资源的时候,资源服务器是如何验证 Token 是否合法的。
36 0
|
20天前
|
XML 安全 前端开发
SpringSecurity系列(四) Spring Security 实现权限树形菜单
SpringSecurity系列(四) Spring Security 实现权限树形菜单
|
20天前
|
前端开发 安全 Java
SpringBoot 实现登录验证码(附集成SpringSecurity)
SpringBoot 实现登录验证码(附集成SpringSecurity)
|
19天前
|
安全 Java 数据库
【Spring Security】Spring Security 前后端分离认证
【Spring Security】Spring Security 前后端分离认证
34 0
|
23天前
|
安全 Java 数据库
后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)
后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则(三)
|
19天前
|
安全 Java API
【Spring Security】Spring Security 认证与授权
【Spring Security】Spring Security 认证与授权
25 0
|
19天前
|
安全 Java 数据安全/隐私保护
【Spring Security】Spring Security 认证过程源码分析
【Spring Security】Spring Security 认证过程源码分析
22 0

相关产品

  • 云迁移中心