技术指南：ElementUI封装全局系统用户信息、角色及权限控制

2023-11-24 04:41:14

前言

在现代Web应用程序中，用户权限控制是一个至关重要的方面。通过对不同用户角色授予不同的权限，我们可以确保用户只能访问和操作他们被授权的内容和功能。ElementUI是一个流行的前端框架，它提供了丰富的UI组件和强大的功能，可以帮助我们轻松地构建具有用户权限控制功能的Web应用程序。

一、举例需求如下图：

[图片]

二、前端ElementUI封装全局系统用户信息、角色信息、菜单权限信息

// 在main.js中导入必要的模块
import { createApp } from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import store from './store'

// 创建Vue实例
const app = createApp(App)

// 使用ElementUI
app.use(ElementUI)

// 使用路由
app.use(router)

// 使用状态管理
app.use(store)

// 挂载Vue实例
app.mount('#app')

// 在App.vue中定义全局属性和方法
export default {
  data() {
    return {
      // 用户信息
      userInfo: {},
      // 角色信息
      roleInfo: {},
      // 菜单权限信息
      menuInfo: {}
    }
  },
  created() {
    // 获取用户信息、角色信息和菜单权限信息
    this.getUserInfo()
    this.getRoleInfo()
    this.getMenuInfo()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      // 从后端获取用户信息
      this.$axios.get('/api/user/info').then(res => {
        this.userInfo = res.data
      })
    },
    // 获取角色信息
    getRoleInfo() {
      // 从后端获取角色信息
      this.$axios.get('/api/role/info').then(res => {
        this.roleInfo = res.data
      })
    },
    // 获取菜单权限信息
    getMenuInfo() {
      // 从后端获取菜单权限信息
      this.$axios.get('/api/menu/info').then(res => {
        this.menuInfo = res.data
      })
    }
  }
}

// 在store/index.js中定义全局状态
export default new Vuex.Store({
  state: {
    // 用户信息
    userInfo: {},
    // 角色信息
    roleInfo: {},
    // 菜单权限信息
    menuInfo: {}
  },
  mutations: {
    // 设置用户信息
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 设置角色信息
    setRoleInfo(state, roleInfo) {
      state.roleInfo = roleInfo
    },
    // 设置菜单权限信息
    setMenuInfo(state, menuInfo) {
      state.menuInfo = menuInfo
    }
  },
  actions: {
    // 获取用户信息
    getUserInfo({ commit }) {
      // 从后端获取用户信息
      this.$axios.get('/api/user/info').then(res => {
        commit('setUserInfo', res.data)
      })
    },
    // 获取角色信息
    getRoleInfo({ commit }) {
      // 从后端获取角色信息
      this.$axios.get('/api/role/info').then(res => {
        commit('setRoleInfo', res.data)
      })
    },
    // 获取菜单权限信息
    getMenuInfo({ commit }) {
      // 从后端获取菜单权限信息
      this.$axios.get('/api/menu/info').then(res => {
        commit('setMenuInfo', res.data)
      })
    }
  }
})

三、后端获取方法

1.控制器

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/user/info")
    public ResponseEntity<UserInfo> getUserInfo() {
        UserInfo userInfo = userService.getUserInfo();
        return ResponseEntity.ok(userInfo);
    }
}

@RestController
@RequestMapping("/api")
public class RoleController {

    @Autowired
    private RoleService roleService;

    @GetMapping("/role/info")
    public ResponseEntity<RoleInfo> getRoleInfo() {
        RoleInfo roleInfo = roleService.getRoleInfo();
        return ResponseEntity.ok(roleInfo);
    }
}

@RestController
@RequestMapping("/api")
public class MenuController {

    @Autowired
    private MenuService menuService;

    @GetMapping("/menu/info")
    public ResponseEntity<MenuInfo> getMenuInfo() {
        MenuInfo menuInfo = menuService.getMenuInfo();
        return ResponseEntity.ok(menuInfo);
    }
}

2.实现接口

public interface UserService {

    UserInfo getUserInfo();
}

public interface RoleService {

    RoleInfo getRoleInfo();
}

public interface MenuService {

    MenuInfo getMenuInfo();
}

3.ShiroUtils工具类

public class ShiroUtils {

    public static UserInfo getUserInfo() {
        Subject subject = SecurityUtils.getSubject();
        UserInfo userInfo = (UserInfo) subject.getPrincipal();
        return userInfo;
    }

    public static RoleInfo getRoleInfo() {
        Subject subject = SecurityUtils.getSubject();
        RoleInfo roleInfo = (RoleInfo) subject.getPrincipals().oneByType(RoleInfo.class);
        return roleInfo;
    }

    public static MenuInfo getMenuInfo() {
        Subject subject = SecurityUtils.getSubject();
        MenuInfo menuInfo = (MenuInfo) subject.getPrincipals().oneByType(MenuInfo.class);
        return menuInfo;
    }
}