526互联

怎么进行按钮级别的权限控制？

发布时间 2023-07-17 13:47:14作者: 星拾夜暝

在项目中，有以下几种常见的实现方式：

  1. 权限指令：使用指令来控制在页面中出现的按钮是否应该显示或可用。例如，当用户没有特定权限时，可以使用一个指令来禁用或隐藏某些按钮。
  2. 权限服务：创建一个权限服务，该服务根据用户角色和其他条件确定用户是否具有权限执行操作。在按钮上添加一个类似 ngIf 的标记，并使用该服务验证用户权限，在需要时显示或隐藏按钮。
  3. 路由守卫：使用路由守卫来限制某些页面或操作的访问权限。当用户试图访问受保护的页面或功能时，路由守卫可以检查用户是否具有足够的权限，如果不是，则重定向到其他页面。
  4. 后端集成：通过后端 API 将权限绑定到每个按钮，只有在用户请求时才会展示对应按钮。这种方法需要后端支持，因此与后端进行密切合作。
下面再用几个例子，带大家继续了解在 Vue  和 React 框架中，怎么使用代码实现。

Vue版本

下面以 Vue 举例说明如何在前端应用中控制按钮级别权限。

1. 权限指令

在 Vue 中可以通过自定义指令来实现按钮权限控制。首先，定义一个名为 v-permission 的指令：

Vue.directive('permission', {
  bind: function(el, binding, vnode) {
    // 获取用户角色
    const userRole = 'admin'; // 这里假设用户角色为管理员

    // 获取指令参数
    const permission = binding.value;

    // 如果用户不具备相应权限，则禁用按钮
    if (userRole !== permission) {
      el.disabled = true;
    }
  }
});

然后，在需要进行权限控制的按钮上添加 v-permission 指令，并传递相应的权限参数：

<button v-permission="'admin'">只有管理员可以操作</button>

这样，当用户角色不是管理员时，该按钮就会被禁用。

2. 权限服务

在 Vue 应用中，可以使用 Vuex 来创建一个全局状态管理器，并在其中定义一个权限管理模块，用于判断用户是否具有某个权限。例如：

const store = new Vuex.Store({
  state: {
    userRole: 'admin'
  },
  getters: {
    isAdmin: state => {
      return state.userRole === 'admin';
    }
  }
});

然后，在需要进行权限控制的组件中，通过 $store.getters 访问 isAdmin 来判断用户是否为管理员。例如：

<template>
  <div>
    <button v-if="$store.getters.isAdmin">只有管理员可以操作</button>
  </div>
</template>

3. 路由守卫

在 Vue 应用中，可以使用路由守卫来限制某些页面或操作的访问权限。例如，在路由配置中添加一个 meta 字段，用于指定该路由需要的权限：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requiresAuth: true }
    },
    // ...
  ]
});

然后，通过 router.beforeEach 方法对每个路由进行拦截，判断用户是否具有访问该路由的权限。例如：

router.beforeEach((to, from, next) => {
  // 获取用户角色
  const userRole = 'admin'; // 这里假设用户角色为管理员

  // 判断该路由是否需要权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果用户不具备相应权限，则重定向到登录页
    if (userRole !== 'admin') {
      next('/login');
    } else {
      next(); // 继续跳转到目标路由
    }
  } else {
    next(); // 不需要权限，直接跳转到目标路由
  }
});

这样，当用户未登录或者非管理员时，访问 /admin 路由就会被重定向到登录页。

4. 后端集成

由于需要从后端获取用户的角色和权限信息，因此在 Vue 应用中控制按钮级别权限需要与后端进行集成。例如，在后端 API 中添加一个 /permissions 接口，用于返回用户具备的所有权限：

app.get('/permissions', (req, res) => {
  // 获取当前用户 ID
  const userId = req.user.id;

  // 查询该用户的角色和权限
  const userRole = 'admin'; // 假设用户角色为管理员
  const userPermissions = ['addUser', 'deleteUser']; // 假设用户具备添加用户和删除用户的权限

  // 返回用户角色和权限
  res.json({ role: userRole, permissions: userPermissions });
});

然后，在 Vue 应用中通过 axios 或其他 HTTP 客户端库调用该接口，并根据返回的数据决定是否显示或禁用按钮。例如：

axios.get('/permissions').then(response => {
  // 获取用户角色和权限
  const userRole = response.data.role;
  const userPermissions = response.data.permissions;

  // 根据用户权限控制按钮显示或禁用
  if (userPermissions.includes('addUser')) {
    this.showAddButton = true;
  } else {
    this.showAddButton = false;
  }
});

在以上代码中，通过 axios.get 方法获取用户的角色和权限信息，并根据权限信息决定是否显示或禁用按钮。当用户具备添加用户的权限时，该按钮就会被显示出来。需要注意的是，后端集成需要对接后端 API，因此与后端进行密切合作，以确保前后端的权限控制逻辑一致。

React版本

下面以 React 举例说明如何在前端应用中控制按钮级别权限。

1. 权限指令

在 React 中可以通过自定义组件来实现按钮权限控制。首先，定义一个名为 PermissionButton 的组件：

function PermissionButton(props) {
  // 获取用户角色
  const userRole = 'admin'; // 这里假设用户角色为管理员

  // 获取组件属性
  const { permission, ...rest } = props;

  // 根据用户角色判断是否具备相应权限，并设置按钮状态
  const disabled = userRole !== permission;

  return (
    <button disabled={disabled} {...rest}>
      {props.children}
    </button>
  );
}

然后，在需要进行权限控制的页面上使用该组件，并传递相应的权限参数：

  
<PermissionButton permission="admin">只有管理员可以操作</PermissionButton>

这样，当用户角色不是管理员时，该按钮就会被禁用。

2. 权限服务

在 React 应用中，可以使用 Context API 来创建一个全局状态管理器，并在其中定义一个权限管理模块，用于判断用户是否具有某个权限。例如：

const PermissionsContext = React.createContext(null);

function PermissionsProvider(props) {
  const [userRole, setUserRole] = useState('admin');

  const value = useMemo(() => {
    return {
      userRole,
      isAdmin: userRole === 'admin',
      setUserRole
    };
  }, [userRole]);

  return (
    <PermissionsContext.Provider value={value}>
      {props.children}
    </PermissionsContext.Provider>
  );
}

function usePermissions() {
  return useContext(PermissionsContext);
}

然后，在需要进行权限控制的组件中，使用 usePermissions 钩子函数获取权限信息，并根据用户角色判断是否具备相应权限。例如：

function AdminPage(props) {
  const { isAdmin } = usePermissions();

  return (
    <div>
      {isAdmin && <button>只有管理员可以操作</button>}
    </div>
  );
}

3. 路由守卫

在 React 应用中，可以使用 react-router-dom 库来进行路由管理，并使用 Route 组件上的 render 属性来指定路由渲染时需要执行的代码。例如，在路由配置中添加一个 requiresAuth 属性，用于指定该路由需要的权限：

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin" requiresAuth component={AdminPage} />
        {/* ... */}
      </Switch>
    </Router>
  );
}

然后，在 Route 组件上使用 render 属性，定义一个函数来判断用户是否具有访问该路由的权限。例如：

function App() {
  const { userRole } = usePermissions();

  function checkAuth(Component, props) {
    if (props.route.requiresAuth && userRole !== 'admin') {
      return <Redirect to="/login" />;
    } else {
      return <Component {...props} />;
    }
  }

  return (
    <Router>
      <Switch>
        <Route
          path="/admin"
          requiresAuth
          render={props => checkAuth(AdminPage, props)}
        />
        {/* ... */}
      </Switch>
    </Router>
  );
}

这样，当用户未登录或者非管理员时，访问 /admin 路由就会被重定向到登录页。

4. 后端集成

由于需要从后端获取用户的角色和权限信息，因此在 React 应用中控制按钮级别权限需要与后端进行集成。例如，在后端 API 中添加一个 /permissions 接口，用于返回用户具备的所有权限：

app.get('/permissions', (req, res) => {
  // 获取当前用户 ID
  const userId = req.user.id;

  // 查询该用户的角色和权限
  const userRole = 'admin'; // 假设用户角色为管理员
  const userPermissions = ['addUser', 'deleteUser']; // 假设用户具备添加用户和删除用户的权限

总结

以上方法各有优缺点，需要根据业务场景和技术框架进行选择。例如，当应用较为简单时，可以使用权限指令；当需要在不同组件之间共享权限信息时，可以使用权限服务；当需要限制某些页面或操作的访问权限时，可以使用路由守卫；当需要与后端进行密切配合时，可以使用后端集成等。无论采用哪种方式，在前端开发时都需要注重安全性和可靠性，保证用户数据和隐私的安全，确保应用操作的正确性和一致性。