在 React 组件的构造函数中检查并推送到另一个 URL 是否有效?

Question

我创建了基于 ACL 的路由应用程序，这意味着一些用户有权查看页面，而其他用户则没有。在运行时，授权用户可以将权限更改为未经授权的用户以访问页面。

示例：最初检查器没有访问页面的权限，但是当管理员允许在运行时访问页面时，检查器可以访问该页面。我将根据用户权限更改导航栏访问权限。

检查构造函数中的特权并推送到所需页面是否有效。

class SomeComponent extends React.Component{
constructor(props){
super(props)
this.state = {
...some values
}
const user_data = localStorage.getItem('userData') // user data getting while login
if(user_data.isAdmin === false || user_data.checker === false){
this.props.history.push('/noauth');
}
}
}

在没有任何东西要渲染的情况下推送到另一个组件是否有效。如果无效，这将导致性能或不可预测的问题？

Answer 1

理想情况下，此检查需要在路由器级别完成。像这样的东西

const isAuthenticated = () => {
const user_data = localStorage.getItem('userData');
if (user_data.isAdmin === false || user_data.checker === false) {
return false;
}
return true;
};
const AuthenticatedRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => {
return isAuthenticated() ? <Component {...props} /> : <Redirect to="/noauth" />;
}}
/>
);
};

这里是经过身份验证的函数返回用户是否经过身份验证的位置。您可以在 isAuthenticated 中检查 localStorage 值并返回。