reactjs - 如何使用 Promise 创建受保护的路由
问题描述
我正在使用钩子来保护我的路线。我遇到的问题是检查用户身份验证状态的调用返回一个 Promise,因此该钩子返回默认值,即 a,然后身份验证状态不再有用,因为我们已经重定向。
那么我怎么能等到身份验证检查完成才从钩子返回呢?这是我的代码:
export function ProtectedRoute(props){
const [loggedIn, setLoggedIn] = useState(false);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
async function fetchUser() {
let user = null;
try {
user = await Auth.currentAuthenticatedUser()
if (user) {
setLoggedIn(true);
} else
{
setLoggedIn(false);
}
} catch (e) {
setLoggedIn(false);
}
}
fetchUser()
});
console.log("ProtectedRoute: returning " + loggedIn);
if (loggedIn)
return props.component
else
return <Redirect to={{pathname: '/login'}}/>
}
解决方案
我会添加一个新状态,loading
直到 ist true
,只渲染一个加载组件:
export default ProtectedRoute(props) {
const [loggedIn, setLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
try {
setLoading(true);
const user = await Auth.currentAuthenticatedUser();
setLoggedIn(!!user);
} catch (error) {
console.log(error);
setLoggedIn(false);
} finally {
setLoading(false);
}
})();
}, []);
if(loading) return <h1>Loading...</h1>;
if (loggedIn) return props.component
return <Redirect to={{ pathname: '/login' }}/>
}
推荐阅读
- bash - 跟踪 pg_dump 进程 id 并在失败时触发错误
- r - 为什么我需要在 Spark 中缩放之前组装矢量?
- r - 在具有精确标准且没有 for 循环的嘈杂数据中查找局部最小值
- angular - 如何正确地将不可观察的转换为可观察的?
- google-sheets - 如果在单元格范围内重复突出显示
- regex - 有没有办法在 awk match() 函数 'match($0,/r{0,var}/)' 中使用变量来定义范围
- flutter - 应用程序被终止时 Flutter 隔离不显示通知
- angular - 如何使用表单数组([])和来自 API 的数据使用 *ngFor 迭代多个复选框
- ruby - 有条件地在一行中分配函数的返回值
- javascript - 使用计算结果自动填充输入字段