使用黑科技实现前端按钮权限控制，太优雅了。——从零开始搭建一个高颜值后台管理系统全栈框架(九)-灵析社区

前言

按钮权限控制在后台管理系统中是一个比较常见的需求，下面和大家分享一下再react中常见的几种实现方式，不过最想分享的还是后面的黑科技方案。

实现添加按钮权限功能

• 改造上一篇文章中添加菜单的表单，添加一个按钮类型菜单。

• 这里权限代码建议页面路由:按钮类型格式，保证全局唯一。
• 改造菜单模型，添加权限代码字段

常见前端按钮权限控制实现方案

前言

从用户信息中获取按钮菜单，把authCode取出来存到全局用户信息中。

封装判断权限全局方法

// src/utils/auth.ts
import {useUserStore} from '@/stores/global/user';

/**
 * 判断是否有权限
 * @param authCode 权限代码
 * @returns
 */
export const isAuth = (authCode: string) => {
  if (!authCode) return false;
  // 从全局数据中获取当前用户按钮权限列表
  const {currentUser} = useUserStore.getState();

  const {authList = []} = currentUser || {};
  // 判断传进来权限代码是否存在权限列表中
  return authList.includes(authCode);
};

这里使用zustand做状态存储太爽了，可以直接在组件外优雅的获取全局数据，以前使用redux的时候，在组件外获取全局值还是挺麻烦的。zustand不止可以在组件外获取值，还可以设置值，甚至还可以监听某个值的变化。封装完上面方法，我们可以在代码中使用。

封装权限hooks

有了全局公共方法了，为啥还要用hooks。如果直接在方法体里面使用方法，每次组件渲染的时候都会执行一下这个方法，如果权限比较多的话，可能会有性能问题。我们封装一个hooks，借助useMemo在authCode不变的时候，不用重新执行判断权限的方法了。

// src/hooks/use-auth/index.tsx
import { useUserStore } from '@/stores/global/user';
import { isAuth } from '@/utils/auth';
import { useMemo } from 'react';

export const useAuth = (authCode: string) => {
  const { currentUser } = useUserStore();

  const auth = useMemo(() => {
    return isAuth(authCode);
  }, [authCode, currentUser?.authList]);
  return auth;
}

使用测试

封装权限hooks

有了全局公共方法了，为啥还要用hooks。如果直接在方法体里面使用方法，每次组件渲染的时候都会执行一下这个方法，如果权限比较多的话，可能会有性能问题。我们封装一个hooks，借助useMemo在authCode不变的时候，不用重新执行判断权限的方法了。

// src/hooks/use-auth/index.tsx
import { useUserStore } from '@/stores/global/user';
import { isAuth } from '@/utils/auth';
import { useMemo } from 'react';

export const useAuth = (authCode: string) => {
  const { currentUser } = useUserStore();

  const auth = useMemo(() => {
    return isAuth(authCode);
  }, [authCode, currentUser?.authList]);
  return auth;
}

使用测试

封装高阶组件

// src/components/with-auth/index.tsx
import { isAuth } from '@/utils/auth';

export function withAuth(authCode: string) {
  return function (Component: any) {
    return function (props: any) {
      return isAuth(authCode) ? <Component {...props}></Component> : null;
    }
  }
}

使用测试

使用黑科技实现按钮权限控制

背景