创建受保护的路由:使用react-router-dom的方法指南
P粉596191963
2023-08-24 11:22:28
<p>如何使用<code>react-router-dom</code>创建一个受保护的路由,并将响应存储在localStorage中,以便用户下次打开时可以再次查看他们的详细信息。登录后,他们应该重定向到仪表盘页面。</p>
<p>所有功能都添加在ContextApi中。
Codesandbox链接:Code</p>
<p>我尝试过,但无法实现</p>
<p>路由页面</p>
<pre class="brush:php;toolbar:false;">import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";
function Routes() {
const { authLogin } = useContext(globalC);
console.log("authLogin", authLogin);
return (
<BrowserRouter>
<Switch>
{authLogin ? (
<>
<Route path="/dashboard" component={Dashboard} exact />
<Route exact path="/About" component={About} />
</>
) : (
<Route path="/" component={Login} exact />
)}
<Route component={PageNotFound} />
</Switch>
</BrowserRouter>
);
}
export default Routes;</pre>
<p>上下文页面</p>
<pre class="brush:php;toolbar:false;">import React, { Component, createContext } from "react";
import axios from "axios";
export const globalC = createContext();
export class Gprov extends Component {
state = {
authLogin: null,
authLoginerror: null
};
componentDidMount() {
var localData = JSON.parse(localStorage.getItem("loginDetail"));
if (localData) {
this.setState({
authLogin: localData
});
}
}
loginData = async () => {
let payload = {
token: "ctz43XoULrgv_0p1pvq7tA",
data: {
name: "nameFirst",
email: "internetEmail",
phone: "phoneHome",
_repeat: 300
}
};
await axios
.post(`https://app.fakejson.com/q`, payload)
.then((res) => {
if (res.status === 200) {
this.setState({
authLogin: res.data
});
localStorage.setItem("loginDetail", JSON.stringify(res.data));
}
})
.catch((err) =>
this.setState({
authLoginerror: err
})
);
};
render() {
// console.log(localStorage.getItem("loginDetail"));
return (
<globalC.Provider
value={{
...this.state,
loginData: this.loginData
}}
>
{this.props.children}
</globalC.Provider>
);
}
}</pre>
<p><br /></p>
对于v6:
文档链接: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
问题
Switch
除了Route
和Redirect
组件之外,不会处理其他任何渲染。如果您想要像这样“嵌套”,那么您需要将每个组件包装在通用路由中,但这是完全不必要的。您的登录组件还没有处理重定向回原来访问的“主页”或私有路由。
解决方案
react-router-dom
v6在版本6中,自定义路由组件已经不再受欢迎,首选方法是使用auth布局组件。
...
或者
...
react-router-dom
v5创建一个消费您的auth上下文的
PrivateRoute
组件。更新您的
Login
组件以处理重定向回原来访问的路由。将所有路由渲染为“扁平列表”