在React中处理用户验证的重定向?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在React中处理用户验证的重定向?相关的知识,希望对你有一定的参考价值。
我想知道其他人如何管理已登录其网站的回访者(使用Cookie令牌证明)
目前,我在根组件中使用redux操作,该操作会触发API调用以检查cookie是否有效。
当这回到TRUE
的FALSE
时,下一个动作取决于用户试图访问的URL。
目前: - 如果用户经过验证并访问/
,他们将被发送给/ contacts
- 如果用户未经过验证并且他们访问任何受保护的路线(例如
/contacts
),则将被踢出/
。
问题: - 如果经过验证的用户在转发之前访问/
,他们会立即看到登录页面。 - 如果他们访问另一条保护路线,如/form
,他们将被踢到/contacts
我知道这两个项目都是在API调用验证用户时暂时未登录的结果。
问题我想知道你在申请中如何处理这个问题? 1.如果用户登录,则在验证发生时避免看到登录页面.2。如果用户已登录,请将他们带到他们请求的页面?
// App.js路由器
class App extends Component {
componentWillMount = async () => {
await this.props.checkLogin();
}
render() {
const { loggedIn } = this.props;
const myProtectedRoutes = [
{component: Form, path: "/form", exact: true },
{component: Contacts, path: "/contacts", exact: true },
{component: ContactCard, path: "/contacts/card/:clientID", exact: true },
]
return (
<BrowserRouter basename="/" >
<div>
<NavBar isLoggedIn={loggedIn} />
<main>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/logout" component={Logout }/>
{myProtectedRoutes.map(
(d, i) =>
<ProtectedRoute
key={i}
isAccessible={ loggedIn ? true : false }
exact
redirectToPath={"/"}
path={d.path}
component={d.component}
/>
)}
</Switch>
</main>
<footer>
<Switch>
<Route path="/" component={Footer}/>
</Switch>
</footer>
</div>
</BrowserRouter>
);
}
}
// LoginForm.js component =>出现在'/'
class App extends Component {
constructor(props){
super(props);
this.state = {
emailaddress: '',
password: '',
}
}
onLoginSubmit = (e) => {
e.preventDefault();
const { emailaddress, password } = this.state;
if (emailaddress && password) {
this.props.doLogin(emailaddress, password, stayloggedin);
}
}
render() {
let { loggedIn } = this.props
// If logged in is true go to contacts or
// I'd like to be able to get to the typed
// URL if logged in is true.
if ( loggedIn ){
return <Redirect push to={"/contacts"} />
}
return (
<div id="mainloginform" className="container">
<!-- Login form Fields go here -->
</div>
);
}
}
答案
通常,用户验证和重定向应该在服务器中进行。
在express,当用户请求任何路线(/
或/contacts
)时,应该发生以下事情
- 检查用户是否有效(使用cookie令牌)
- 如果有效,则将用户重定向到请求的路由。
- 如果无效,请将用户重定向到
/
(使用req.redirect('/')
)
希望这可以帮助!
另一答案
在redux中,做出三个动作是一种常见的模式。考虑在获取期间显示“in_progress”UI?
{ type: 'FETCH_REQUEST' }
{ type: 'FETCH_FAILURE', error: 'Oops' }
{ type: 'FETCH_SUCCESS', response: { ... } }
有关详细信息,请参阅here。
以上是关于在React中处理用户验证的重定向?的主要内容,如果未能解决你的问题,请参考以下文章