ant design 登录权限控制

ant design 登录权限控制

 

在models>>login.ts中 logout 方法 增加 localStorage.removeItem('antd-pro-authority')

当用户退出的时候用调用 login/logout

用户登录时获取 用户的authority 保存在localStorage

authority中 setAuthority 方法

localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));

 

logout() {
      const { redirect } = getPageQuery();
      localStorage.removeItem('antd-pro-authority')
      // Note: There may be security issues, please note
      if (window.location.pathname !== '/user/login' && !redirect) {
        history.replace({
          pathname: '/user/login',
          search: stringify({
            redirect: window.location.href,
          }),
        });
      }
    },
  },

### Ant Design 实现权限管理教程 #### 1. 权限控制基础概念 在Ant Design Pro项目中,权限管理是一个重要的组成部分。为了确保不同角色的用户能够访问相应的资源并执行特定的操作,系统需要具备完善的权限控制系统[^1]。 #### 2. 使用`Access.ts`文件配置多角色权限逻辑 对于复杂的业务场景而言,可能涉及到多种类型的用户角色(如管理员、编辑者等)。此时可以利用`access.ts`定义各角色对应的权限规则,并通过编程方式动态调整界面元素显示状态或阻止非法操作行为的发生。 ```typescript // src/access.ts export default { canAdmin: (currentAuthority) => currentAuthority === 'admin', }; ``` 此代码片段展示了如何创建一个简单的函数用于判断当前登录用户是否拥有管理员身份。实际应用时可以根据具体需求扩展更多条件判断语句以满足复杂的应用场景下的细粒度授权要求。 #### 3. 动态菜单与图标展示 针对菜单项及其关联图标的渲染过程,通常会在路由配置阶段完成初始化工作。而在运行期间,则可通过监听全局事件或其他机制触发重新加载最新数据源的动作,从而达到即时更新的效果。此外,还可以考虑引入懒加载技术优化初次加载性能表现[^7]。 ```javascript const menuData = [ { name: "首页", path: "/", icon: <HomeOutlined /> }, // 更多项... ]; ``` 上述例子说明了怎样构建带有icon属性的基础导航列表结构;而关于如何实现按需加载子级节点以及响应式布局等问题则不在本节讨论范围内[^8]。 #### 4. 表单控件级别的权限校验 除了整体页面层面的安全防护措施之外,有时也需要对某些特殊字段实施更严格的限制策略——比如仅允许部分人员查看敏感信息或者提交审核请求等等。为此可以在编写React组件的过程中巧妙运用高阶组件模式(HOC),借助于额外的状态管理和副作用处理工具来增强原有功能特性的同时保持良好的可维护性和灵活性特点[^9]。 ```jsx import React from 'react'; import { Form, Input } from '@ant-design/react'; function AdminOnlyInput(props){ const authority = getAuthority(); // 获取当前用户的权限等级 if(!canEdit(authority)){ return null; } return ( <Form.Item label="仅供管理员填写"> <Input {...props} /> </Form.Item> ); } ``` 这里给出了一种简单的方法用来隐藏那些不适用于当前上下文环境内的输入框实例。当然也可以进一步封装成通用型hook供其他地方重复调用.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值