Question

我想使用渲染道具实现基于角色的授权。我有三种用户类型，我想让每个用户类型都可以访问导航栏的不同部分以及应用程序中的不同页面。

我不确定如何实施它，有什么建议吗？我尝试过使用HOC，但对我而言却行不通。

Answer 1

这是一种方法，

假设用户存储在本地存储中（或可以将其保存为redux状态），

const Input = styled.input`
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
  }
`;
const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  ${Input}:focus & {
    top:-20px;
  font-size:14px;
  color:#5264AE;
  }
`;

在var user = localStorage.getItem('user') if (user) { user = JSON.parse(user) }内部：

return()

React：如何使用渲染道具来实现基于角色的身份验证

1 个答案: