SpringSecurity-前端VUE3如何配置

资源白名单设置

1. springboot 的application.yaml 文件

# application.yaml
# whitelist 这些地址不需要token
auth:
  white:
    - /common/recommend/FirstPagesAfterLogin
    - /sys/config/appImgUpload
    - /sys/commquickmenu/info/*
    - /sys/commquickmenu/delete
    - /sys/commquickmenu/deleteMT
    - /sys/commquickmenu/save
    - /activiti/act/operate/taskCount
    - /swagger-ui/index.html
    - /v3/**
    - /swagger-ui/**
    - /swagger-ui.html
    - /user/login
    - /auth/login
    - /favicon.ico

2. Configuration 的java的 文件配置

// AuthProperties 获取 auth.white 的数据
package cn.bitgeek.config;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

import java.util.List;

@Configuration
@ConfigurationProperties(prefix = "auth")
@Data
public class AuthProperties {

    private String[] white;

}

VUE 开发的前端项目中需要📢如下的事情

1. 通过用户信息详情接口进行处理

{
    url: "/api/v1/users/me",
    method: ["GET"],
    body: {
      code: "00000",
      data: {
        userId: 2,
        nickname: "系统管理员",
        avatar:
          "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
        roles: ["ADMIN"],
        // 说明用户具有如下的 perms的权限 在用户需要使用的组件上面处理相关数据 保存到localstorage里面
        perms: [
          "sys:menu:delete",
          "sys:dept:edit",
          "sys:dict_type:add",
          "sys:dict:edit",
          "sys:dict:delete",
          "sys:dict_type:edit",
          "sys:menu:add",
          "sys:user:add",
          "sys:role:edit",
          "sys:dept:delete",
          "sys:user:edit",
          "sys:user:delete",
          "sys:user:reset_pwd",
          "sys:dept:add",
          "sys:role:delete",
          "sys:dict_type:delete",
          "sys:menu:edit",
          "sys:dict:add",
          "sys:role:add",
        ],
      },
      msg: "一切ok",
    },
  },

2. vue的组件按钮级别的显示与隐藏的时候

<!-- 按钮 -->
<el-button
    v-hasPerm="['sys:dict:add']"
    type="success"
    @click="openDialog()">新增</el-button>

<el-button
    v-hasPerm="['sys:dict:delete']"
    type="danger"
    :disabled="ids.length === 0"
    @click="handleDelete()" >删除</el-button>

3. 配置一个钩子函数 专门校验这个人是不是有这个权限

import { useUserStoreHook } from "@/store/modules/user";
import { Directive, DirectiveBinding } from "vue";

/**
 * 按钮权限
 */
export const hasPerm: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 「超级管理员」拥有所有的按钮权限
    const { roles, perms } = useUserStoreHook().user;
    if (roles.includes("ROOT")) {
      return true;
    }
    // 「其他角色」按钮权限校验
    const { value } = binding;
    if (value) {
      const requiredPerms = value; // DOM绑定需要的按钮权限标识

      const hasPerm = perms?.some((perm) => {
        return requiredPerms.includes(perm);
      });

      if (!hasPerm) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(
        "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
      );
    }
  },
};

/**
 * 角色权限
 */
export const hasRole: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding;

    if (value) {
      const requiredRoles = value; // DOM绑定需要的角色编码
      const { roles } = useUserStoreHook().user;
      const hasRole = roles.some((perm) => {
        return requiredRoles.includes(perm);
      });

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
    }
  },
};

4. 需要写一个 useUserStoreHook 的钩子函数获取用户信息,这样如果能获取到目前线上的用户是不是有能访问这个按钮的权限

// 非setup
export function useUserStoreHook() {
  return useUserStore(store);
}

export const useUserStore = defineStore("user", () => {
  const user: UserInfo = {
    roles: [],
    perms: [],
  };
});