React组件在检查身份验证后未呈现

Question

因此，基本上，我正在尝试为我的应用程序创建一个受保护的路由，并且我有另一个功能来检查服务器API是否正确验证了客户端。不幸的是，由于React Hooks的工作方式，状态不会直接更新，如果我试图在用户未通过身份验证时进行重定向，它只会将我发送到那里。因此，当您重新加载页面时，由于状态也被重置，在第一次呈现时，它会将我视为未登录(即使我已登录(，并将我发送到登录页面。

所以我想的是，我可以等待，直到它得到响应，然后用isAuth(ctx).then(...)渲染，然而，它什么都不渲染。

这是我的路由器结构：

<BrowserRouter>
<AppContext.Provider value={ctx}>
<Route path="/dashboard">
<Switch>
<LoginRoute exact path="/dashboard/login" component={LogInDash} />
<ProtectedRoute exact path="/dashboard/create" component={CreateProperty} />
<ProtectedRoute exact path="/dashboard/list" component={ListDash} />
<ProtectedRoute exact path="/dashboard/edit/:id" component={EditProperty} />
<ProtectedRoute exact path="/dashboard/delete/:id" component={DeleteProperty} />
</Switch>
</Route>
</AppContext.Provider>
</BrowserRouter>

下面是从API获取的函数：

export const isAuth = async (ctx: React.ComponentState): Promise<boolean> => {
const fetchRes = fetch(`${APIURL}/api/auth`, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
})
.then((res) => {
res.json();
if (res.status === 200) {
ctx.auth.set(true);
console.log('successful verification');
return true;
} else {
ctx.auth.set(false);
console.log('Token not verified');
return false;
}
})
.catch((error) => {
console.log(error);
return false;
});
return fetchRes;

}；

最后，这里是ProtectedRouter代码：

export function ProtectedRoute({ component: Component, ...rest }: any): any {
const ctx = React.useContext(AppContext);
return (
<Route
{...rest}
render={(props) => {
isAuth(ctx);
/* isAuth(ctx).then((res) => { */
if (ctx.auth.get) {
return <Component {...rest} {...props} />;
} else {
/* return <Unauthorized />; */
return <Redirect to="/dashboard/login" />;
/* window.location.href = '/dashboard/login'; */
}
/* }); */
}}
/>
);
}

我觉得我只是错过了一些愚蠢的东西，或者我试图应用的概念中有一些错误。

谢谢你读到这里！

Answer 1

我将引入一个新的isReady状态和await，用于useEffect钩子中的身份验证。例如，在它还没有准备好之前，应用程序可以显示一个正在加载的<span>。

我的建议如下：

export function ProtectedRoute({ component: Component, ...rest }: any): any {
const ctx = React.useContext(AppContext);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
const runAuth = async () => {
await isAuth(ctx);
setIsReady(true);
}
runAuth();
}, [])
return (
<Route
{...rest}
render={(props) => {
if (!isReady} {
return <span>Loading ...</span>
}
if (ctx.auth.get) {
return <Component {...rest} {...props} />;
} else {
/* return <Unauthorized />; */
return <Redirect to="/dashboard/login" />;
/* window.location.href = '/dashboard/login'; */
}
/* }); */
}}
/>
);
}

建议阅读《使用效果钩》。

Answer 2

// NOTE: Is this firing correctly.. doesn't seem to fire if signed in .... and then try to go to profile or inventory page directly .... always redirects to '/' it seems
const AuthedRoute = ({ component: Component, user, ...rest }) => (
<Route
{...rest}
render={(props) =>
user.authenticated === null ? null : user.authenticated ? <Component {...props} /> : <Redirect to="/" />
}
/>
);