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

/**
 *  管理
 * @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);
    }
}

/**
 * 普通用户
 * @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);
    }
}

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

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

<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>

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)
    }
}