我可以在受保护的路由上保持令牌的持久性吗

Question

如果问题措辞不正确，很抱歉。我在学校使用React.js和ParseServer。问题如下：

我希望有受保护的路由，只适用于当前登录的用户，我正试图通过使用.getSessionToken()Parse内置函数来实现这一点。我成功检索了令牌，只有在登录时才能访问受保护的路由，但一旦刷新页面，由于令牌已更新，路由将再次无法访问。

我有一个可行的解决方案，但目前会产生一些问题。问题是，即使我可以访问该页面，控制台中也会出现以下错误：No routes matched location "/page1"

你知道我如何阻止令牌更新或任何其他更优雅的解决方案吗

我的代码如下：

1.登录时，我使用useState()通过props传递一个setter，一直传递到路由所在的App.js。我在这里设置令牌的唯一原因是为了导航到受保护的下一页。

await Parse.User.logIn(username, password);
const currentUser = Parse.User.current();
const currentToken = currentUser.getSessionToken();
setSessionToken(currentToken);
navigate("/page1");

2.在这里，我正在检查用户当前是否在我的本地存储中，如果是，则获取与该用户关联的令牌。

//sessionToken = the one I pass with props from step 1
const [sessionToken, setSessionToken] = useState();
//This makes sure that I get the token again and again if page is refreshed
const [refreshedToken, setRefreshedToken] = useState();
const authenticateUser = async () => {
if (Parse.User.current() !== null) {
const token = Parse.User.current().getSessionToken();
setRefreshedToken(token);
}
};
useEffect(async () => {
await authenticateUser();
}, []);

3.由于我现在有两个状态变量，我通过使用这两个变量来进行条件呈现。

<Route
path="/login"
element={<LoginPage setSessionToken={setSessionToken} />}
/>
{(sessionToken !== undefined || refreshedToken !== undefined) && (
<Fragment>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />

Answer 1

我认为这里的问题是，在渲染路由的组件知道它应该渲染路由之前，您试图导航到路径"/page1"，因此出现No routes matched location "/page1"错误。

您可能需要创建一个AuthWrapper组件，该组件检查会话存储和令牌，并为要保护的嵌套路由呈现Outlet，否则将用户重定向到另一个页面，即主页或登录。

import { Outlet, Navigate, useLocation } from 'react-router-dom';
const AuthWrapper = (props) => {
const location = useLocation();
... business logic to check sesstionStorage/token ...
return (sessionToken !== undefined || refreshedToken !== undefined)
? <Outlet />
: <Navigate to="/login" replace state={{ from: location }} />
};

现在声明路由，在AuthWrapper布局组件中包装要保护的路由。

<Route
path="/login"
element={<LoginPage setSessionToken={setSessionToken} />}
/>
<Route element={<AuthWrapper /* pass any session props here */ />}>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />
</Route>