- 首页
- 前端开发
- 使用 React Router v4 进行身份验证后导航到页面
使用 React Router v4 进行身份验证后导航到页面
[英] Navigate to page after authentication using React Router v4
本文介绍了使用 React Router v4 进行身份验证后导航到页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在身份验证成功后从 login.js 导航到 app.js.我能够使用路由器 v3 和浏览器历史相对容易地做到这一点.我不太确定如何使用路由器 v4 导航页面，因为它们的方法似乎非常不同，而且我以前使用的方法不再有效.我尝试参考这篇文章在 React-Router v4 中以编程方式导航，但建议对我不起作用.关于如何使用 v4 在我的应用中遍历页面的任何建议?
这是一个电子应用程序
Index.js
import { HashRouter as Router } from 'react-router-dom';从反应"导入反应；从 'react-dom' 导入 ReactDOM；从反应路由器"导入{开关，路由}；从'react-router-dom'导入{ BrowserRouter}从'./screens/Login'导入登录；从'./App'导入应用程序；const 应用程序 = () =>(<路由器><应用程序/></路由器>);ReactDOM.render(, document.getElementById('root'));
Login.js
'use strict';从反应"导入反应，{PropTypes}；从 'react-dom' 导入 ReactDOM；从'react-router-dom'导入{路由，路由器}；从反应路由器"导入 { matchPath, withRouter, browserHistory};类登录扩展了 React.Component{构造函数(上下文){超级(上下文)；this.state = {电子邮件:''，密码:''，呃:''，装载机:0};this.handleEmailChange = this.handleEmailChange.bind(this);this.handlePasswordChange = this.handlePasswordChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}焦点空输入(){//焦点prvog praznog inputafor (var ref in this.refs) {if(this.state[ref] === ''){this.refs[ref].focus();休息;}}}句柄名称更改(e){this.setState({name: e.target.value});}handleEmailChange(e){this.setState({email: e.target.value});}handlePasswordChange(e){this.setState({密码: e.target.value});}处理提交(e){e.preventDefault();const email = this.state.email.trim();const 密码 = this.state.password.trim();//Provjeri prazne inpute i focus na prvi prazanif((email === '')||(密码 === '')){this.setState({ err: '所有字段都是必需的.'});this.focusEmptyInput();返回;}this.setState({ 错误: ''});/** AJAX REST 调用........ **/常量用户信息 = {电子邮件:电子邮件，pass:密码};this.setState({加载器: 100});var jsforce = require('jsforce');var conn = new jsforce.Connection({oauth2:{//您可以更改 loginUrl 以连接到沙箱或预发布环境.loginUrl : 'https://test.salesforce.com',客户 ID : '空',客户秘密:'空'，redirectUri : 'https://test.salesforce.com/services/oauth2/token',}});conn.login(电子邮件，密码，功能(错误，用户信息){if (err) { return console.error(err,email,password);}//现在您可以获取访问令牌和实例 URL 信息.//保存它们以便下次建立连接.var token = conn.accessToken;控制台日志(conn.accessToken)；控制台日志(conn.instanceUrl)；//exports.token = conn.accessTokensessionStorage.setItem("token", token);console.log("用户名:" + userInfo.id);console.log("组织 ID:" + userInfo.organizationId);//...//我希望能够重定向到 app.jsbrowserHistory.push('../app.js')})}使成为(){返回 (<div className="登录页面"><div className="包装器"><form className="login-form" onSubmit={this.handleSubmit}><div className="title"><h1>登录</h1><p>请输入您的登录信息.</p>
<div className={(this.state.err === "") ?隐藏":错误消息淡入"}><p>{this.state.err}</p>
<输入类型=文本"参考 =电子邮件"类名=表单控件"值={this.state.email}onChange={this.handleEmailChange}占位符=电子邮件"/><输入类型=密码"参考=密码"类名=表单控件"值={this.state.password}onChange={this.handlePasswordChange}占位符=密码"/><button type="submit" className="btn">登录</button></表单>
);}}导出默认登录；
app.js
import React, { Component } from 'react';从'react-router-dom'导入{路由}；从反应路由器"导入 { matchPath, withRouter };进口 {窗户，标题栏，导航窗格，导航窗格项，来自反应桌面/窗口"；从./screens"导入{主页，设置}；从 './assets/icons' 导入 * 作为图标；const 路由 = [{小路: '/'，准确:真实，title: '家',图标:Icons.welcomeIcon，组件:首页，}, {路径:'/设置'，title: '设置',图标:Icons.formIcon，组件:设置，}];类 App 扩展组件 {静态默认道具 = {主题:黑暗"，颜色:'#cc7f29'，}使成为() {const { 替换，位置，主题，颜色 } = this.props;//eslint-disable-line返回 (<窗口主题={主题}颜色={颜色}><TitleBar title="我的Windows应用程序"控件/><NavPane openLength={200} push theme={theme} color={color}>{routes.map(route => (<导航窗格项键={route.path}标题={route.title}图标={route.icon}selected={Boolean(matchPath(location.pathname, route.path, {精确:route.exact，严格:route.strict，}))}onSelect={() =>{替换(路由.路径)；}}颜色={颜色}背景=#ffffff"主题=光"填充="10px 20px"推><精确路由={route.exact} path={route.path} component={route.component}/></NavPaneItem>))}</导航窗格></窗口>);}}导出默认 withRouter(App);
解决方案
通过创建以下条目，我能够在 Router v4 上正常工作.
class Login 扩展 React.Component{构造函数(){极好的();this.state = {重定向:假};this.handleSubmit = this.handleSubmit.bind(this);
在我的登录功能中我使用了这个
handleSubmit(){//成功后执行此操作...this.setState({重定向:真})}.bind(this))}
然后在渲染函数中.
渲染(){如果(this.state.redirect){return <Redirect to="../app.js"/>;}返回 (
<button type="submit" onClick={this.handleSubmit} className="btn">登录</button>
);}}
I'm trying to navigate to app.js from login.js upon successful authentication. I was able to do this relatively easy using router v3 and browserhistory. I'm not really sure how to navigate pages using router v4 as their methodology seems to be very different and the previous method I used no longer works. I tried referencing this post Navigating Programatically in React-Router v4, but the suggestions didn't work for me. Any advice on how how I can traverse pages in my app with v4?
This is an Electron App
Index.js
import { HashRouter as Router } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom'
import Login from './screens/Login';
import App from './App';
const Application = () => (
<Router>
<App />
</Router>
);
ReactDOM.render(<Application />, document.getElementById('root'));
Login.js
'use strict';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { Route, Router } from 'react-router-dom';
import { matchPath, withRouter, browserHistory} from 'react-router';
class Login extends React.Component{
constructor(context){
super(context);
this.state = {
email:'',
password:'',
err:'',
loader: 0
};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
focusEmptyInput(){
//Focus prvog praznog inputa
for (var ref in this.refs) {
if(this.state[ref] === ''){
this.refs[ref].focus();
break;
}
}
}
handleNameChange(e){
this.setState({name: e.target.value});
}
handleEmailChange(e){
this.setState({email: e.target.value});
}
handlePasswordChange(e){
this.setState({password: e.target.value});
}
handleSubmit(e){
e.preventDefault();
const email = this.state.email.trim();
const password = this.state.password.trim();
//Provjeri prazne inpute i focus na prvi prazan
if((email === '')||(password === '')){
this.setState({ err: 'All fields are required.'});
this.focusEmptyInput();
return;
}
this.setState({ err: ''});
/** AJAX REST calls............ **/
const userInfo = {
email: email,
pass: password
};
this.setState({ loader: 100});
var jsforce = require('jsforce');
var conn = new jsforce.Connection({
oauth2 : {
// you can change loginUrl to connect to sandbox or prerelease env.
loginUrl : 'https://test.salesforce.com',
clientId : 'empty',
clientSecret : 'empty',
redirectUri : 'https://test.salesforce.com/services/oauth2/token',
}
});
conn.login(email, password, function(err, userInfo) {
if (err) { return console.error(err,email,password);
}
// Now you can get the access token and instance URL information.
// Save them to establish connection next time.
var token = conn.accessToken;
console.log(conn.accessToken);
console.log(conn.instanceUrl);
//exports.token = conn.accessToken
sessionStorage.setItem("token", token);
console.log("User ID: " + userInfo.id);
console.log("Org ID: " + userInfo.organizationId);
// ...
// I would like to be able to redirect to app.js
browserHistory.push('../app.js')
})
}
render(){
return (
<div className="login-page">
<div className="wrapper">
<form className="login-form" onSubmit={this.handleSubmit}>
<div className="title">
<h1>Login</h1>
<p>Please enter your login informations.</p>
</div>
<div className={(this.state.err === "") ? "hidden" : "error-message fadeIn"}>
<p>{this.state.err}</p>
</div>
<input
type="text"
ref="email"
className="form-control"
value={this.state.email}
onChange={this.handleEmailChange}
placeholder="Email"
/>
<input
type="password"
ref="password"
className="form-control"
value={this.state.password}
onChange={this.handlePasswordChange}
placeholder="Password"
/>
<button type="submit" className="btn">Login</button>
</form>
</div>
</div>
);
}
}
export default Login;
app.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { matchPath, withRouter } from 'react-router';
import {
Window,
TitleBar,
NavPane,
NavPaneItem,
} from 'react-desktop/windows';
import { Home, Settings } from './screens';
import * as Icons from './assets/icons';
const routes = [{
path: '/',
exact: true,
title: 'Home',
icon: Icons.welcomeIcon,
component: Home,
}, {
path: '/settings',
title: 'Settings',
icon: Icons.formIcon,
component: Settings,
}];
class App extends Component {
static defaultProps = {
theme: 'dark',
color: '#cc7f29',
}
render() {
const { replace, location, theme, color } = this.props; // eslint-disable-line
return (
<Window theme={theme} color={color}>
<TitleBar title="My Windows Application" controls />
<NavPane openLength={200} push theme={theme} color={color}>
{routes.map(route => (
<NavPaneItem
key={route.path}
title={route.title}
icon={route.icon}
selected={Boolean(matchPath(location.pathname, route.path, {
exact: route.exact, strict: route.strict,
}))}
onSelect={() => {
replace(route.path);
}}
color={color}
background="#ffffff"
theme="light"
padding="10px 20px"
push
>
<Route exact={route.exact} path={route.path} component={route.component} />
</NavPaneItem>
))}
</NavPane>
</Window>
);
}
}
export default withRouter(App);
解决方案
I was able to get this working correctly with Router v4 by making the below entries.
class Login extends React.Component{
constructor(){
super();
this.state = {
redirect: false
};
this.handleSubmit = this.handleSubmit.bind(this);
In my login function I used this
handleSubmit(){
// On Success do this...
this.setState({
redirect: true
})
}.bind(this))
}
And then in render function.
render(){
if (this.state.redirect) {
return <Redirect to="../app.js" />;
}
return (
</div>
<button type="submit" onClick={this.handleSubmit} className="btn">Login</button>
</div>
);
}
}
这篇关于使用 React Router v4 进行身份验证后导航到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
