如何解决如何根据用户是否通过身份验证显示导航栏?
我想根据用户是否通过身份验证来呈现不同的Navbar视图,第一个版本适用于将具有“登录和注册”链接的新用户,第二个版本在获得授权后具有“个人资料”链接。当前,父级App组件会检查localStorage中是否存在令牌,然后将其发送到后端,并使用接收到的数据来设置用户。
function App() {
const dispatch = usedispatch();
dispatch(loadUser());
return (
<Router>
<div className='App'>
<Navbar />
<div className='container'>
<Switch>
// Routes
</Switch>
</div>
</div>
</Router>
);
}
我的导航栏组件
function Navbar() {
const dispatch = usedispatch();
const isAuthed = useSelector(state => state.auth.isAuthenticated);
const onlogout = () => {
dispatch(logoutUser());
window.location = '/';
};
if (isAuthed) {
return <Authednavbar onlogout={onlogout} />;
} else {
return <Unauthednavbar />;
}
}
但是,由于加载用户需要花费一些时间,因此未经身份验证的导航栏会首先呈现,这是因为初始状态为false,然后在几秒钟后更改为另一状态。阻止它们顺序渲染的好方法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。