使用react
+ react-router-dom
:
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
并以此保护路线:
路由器
const Router = () => {
return (
<Switch>
<PrivateRoute exact path='/Panel' component={Panel}></PrivateRoute>
<Route exact path='/Register' component={Register}></Route>
<Route exact path='/Login' component={Login}></Route>
</Switch>
);
};
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
Auth.getAuth() ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/Login"
}}
/>
)
}
/>
);
身份验证
const Auth = {
isAuthenticated: false,
authenticate() {
this.isAuthenticated = true;
},
signout() {
this.isAuthenticated = false;
},
getAuth() {
return this.isAuthenticated;
}
};
这样可以正常工作,并且用户可以轻松登录,注销,但是问题是,当用户登录时,我想将用户重定向到/Panel
路由,所以我尝试了:
window.location.href = "/Panel"
OR:
this.props.history.push('/Panel')
两者重定向到/Login
的速度都太快,但是如果我单击Panel
链接,它将转到Panel
路由。第二个问题是,当我刷新此地址/Panel
上的页面时,它再次将我带回到/Login
。所以我要解决的是:
已经看过这个主题,并且尝试过但没有成功:
答案 0 :(得分:1)
第一个问题:
您可以将url保持这种状态,以便登录后可以重定向到。
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
在“登录”组件中,成功登录后,您可以重定向到:
const { state } = this.props.location;
window.location = state ? state.from.pathname : "/";
第二个问题:
一种替代解决方案是将登录状态保留在localStorage中,以便刷新后可以从那里读取应用程序。通常是通过从登录api向客户端发送jsonwebtoken并将令牌保存到localStorage来完成的。