
如何使用 React Router DOM 建立受保護的路由?
問題
此程式碼利用 React Router DOM 並將回應儲存在 localStorage 中,應建立一個受保護的路由,讓使用者在返回頁面後繼續查看其詳細資料。登入後,他們應該被重定向到儀表板頁面,但實現未能實現此目的。
路線頁面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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;
|
登入後複製
上下文頁
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 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:
.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() {
}
}
|
登入後複製
解決方案
1. React Router DOM v6
在版本6 中,使用auth 版面配置元件而不是自訂路由元件:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Navigate, Outlet } from 'react-router-dom' ;
const PrivateRoutes = () => {
const { authLogin } = useContext(globalC);
if (authLogin === undefined) {
return null;
}
return authLogin
? <Outlet />
: <Navigate to= '/login' replace state={{ from: location }} />;
}
|
登入後複製
更新你的路由:
1 2 3 4 5 6 7 8 9 10 | <BrowserRouter>
<Routes>
<Route path= '/' element={<PrivateRoutes />} >
<Route path= 'dashboard' element={<Dashboard />} />
<Route path= 'about' element={<About />} />
</Route>
<Route path= '/login' element={<Login />} />
<Route path= '*' element={<PageNotFound />} />
</Routes>
</BrowserRouter>
|
登入後複製
2. React Router DOM v5
在版本5 中,建立一個 PrivateRoute 元件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const PrivateRoute = (props) => {
const { authLogin } = useContext(globalC);
if (authLogin === undefined) {
return null;
}
return authLogin ? (
<Route {...props} />
) : (
<Redirect
to={{
pathname: '/login' ,
state: { from: location }
}}
/>
);
};
|
登入後複製
更新您的登入元件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | export default function Login() {
const { authLogin, loginData } = useContext(globalC);
const location = useLocation();
const history = useHistory();
useEffect(() => {
if (authLogin) {
const { from } = location.state || { from: { pathname: '/' } };
history.replace(from);
}
}, [authLogin, history, location]);
return (
...
);
}
|
登入後複製
更新您的路由:
1 2 3 4 5 6 7 8 9 10 11 12 | function Routes() {
return (
<BrowserRouter>
<Switch>
<PrivateRoute path= '/dashboard' component={Dashboard} />
<PrivateRoute path= '/About' component={About} />
<Route path= '/login' component={Login} />
<Route component={PageNotFound} />
</Switch>
</BrowserRouter>
);
}
|
登入後複製
以上是如何在 React Router DOM v5 和 v6 中實現受保護的路由?的詳細內容。更多資訊請關注PHP中文網其他相關文章!