我使用react-router v 2.0.0并尝试按照以下链接中的示例来实现登录。 https://github.com/tylermcginnis/react-router-firebase-auth
问题是登录后页面转换。但这不会反映在URL中。因此,网址仍然是#/
,而不是#/main
。
这是我的代码。非常感谢任何帮助
routes.js
import React from 'react';
import { Router, Route} from 'react-router' ;
import { IndexRoute } from 'react-router' ;
import { hashHistory } from 'react-router'
import LoginPage from '../components/LoginPage.js';
import App from '../../app.js';
import MainApp from '../components/MainApp.js';
import firebaseUtils from '../firebaseUtils.js';
function requireAuth(nextState, replace) {
console.log(nextState);
console.log(!firebaseUtils.isLoggedIn());
if (firebaseUtils.isLoggedIn()!=true) {
replace({
pathname: '/',
state: { nextPathname: nextState.location.pathname }
})
}
}
var routes=(
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={LoginPage}/>
<Route path='main' component={MainApp} onEnter={requireAuth}>
</Route>
</Route>
</Router>
);
module.exports = routes;
LoginPage.js
import React from 'react';
import firebaseUtils from './../firebaseUtils.js'
import { browserHistory } from 'react-router'
var LoginPage=React.createClass({
contextTypes: {
router: React.PropTypes.object.isRequired
},
getInitialState: function(){
return {
error: false
}
},
onChangeEmail:function(e){
this.setState({email: e.target.value});
},
onChangePassword:function(e){
this.setState({password: e.target.value});
},
formSubmit:function(e){
e.preventDefault();
//authenticate user
if (this.state.email.trim().length !== 0&&this.state.password.trim().length !== 0)
{
firebaseUtils .loginWithPassword({email: this.state.email, password: this.state.password}, function(){
var location = this.props.location;
if (location.state && location.state.nextPathname) {
this.context.router.replace(location.state.nextPathname);
console.log('choice 1')
} else {
this.context.router.replace('/main');
console.log('choice 2');
}
}.bind(this));
}
this.setState({email: '',password:''});
},
render:function(){
console.log('Rendering Login');
var errors = this.state.error ? <p> Error on Login </p> : '';
return(<div className="container">
<div className="main">
<h2 className="welcome-header">TenReps Admin</h2>
<hr/>
<form className="login-form" onSubmit={this.formSubmit}>
<br/>
<input type="text" name="email" id="email" onChange={this.onChangeEmail} placeholder="Email" value={this.state.email}/>
<br/>
<input type="password" name="password" id="password" onChange={this.onChangePassword} placeholder="Password" value={this.state.password}/>
<br/>
<button type="submit" className="submit-login" >Login</button>
</form>
{errors}
</div>
</div>);
}
});
export default LoginPage
firebaseUtils.js
var ref = new Firebase('https://firebaseapp.firebaseio.com/');
var cachedUser = null;
var firebaseUtils={
loginWithPassword: function(userObj, cb, cbOnRegister){
ref.authWithPassword(userObj, function(err, authData){
if(err){
console.log('Error on login:', err.message);
} else {
console.log('Logged In:');
authData.email = userObj.email;
cachedUser = authData;
cb(authData);
}
}.bind(this));
},
isLoggedIn: function(){
return cachedUser && true || ref.getAuth() || false;
},
logout: function(){
ref.unauth();
cachedUser = null;
},
}
export default firebaseUtils;
答案 0 :(得分:0)
确定。所以这样做的原因是我正在使用Webpack-devserver - 这意味着我的应用程序出现在此URL http://localhost:8080/webpack-dev-server/#
如果您希望网址更改显示,只需转到http://localhost:8080/。但是这样就没有热重装了。