如果已在

时间:2018-02-23 06:40:29

标签: javascript reactjs firebase react-router firebase-authentication

我已在我的页面中添加了Google身份验证。现在,一旦我 登录,如果应用程序的选项卡关闭,会话应该保持不变,当我返回时,应该再次自动登录。这不是发生在这里, 有什么帮助吗?

我有以下事情

/ * index.js * /

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import Routes from './routes';
import * as firebase from 'firebase';

// Initialized Firebase here

var config = {
    apiKey: "<api key>",
    authDomain: "<auth domain>",
    databaseURL: "<database url>",
    projectId: "<project id>",
    storageBucket: "<storage bucket>",
    messagingSenderId: "<messaging sender id>"
};
firebase.initializeApp(config);

// Have set the route here

ReactDOM.render(
    <Router history={browserHistory} routes={Routes} />,
    document.querySelector('.container')
);

/ * login.js * /

import React, { Component, PropTypes } from 'react';
import * as firebase from 'firebase';

class Login extends Component {

    constructor(props) {
        super(props);
    }

    static contextTypes = {
        router: PropTypes.object
    }

    handleClick() {
        var provider = new firebase.auth.GoogleAuthProvider();;
        let self = this;
        firebase.auth().signInWithPopup(provider).then(function(result) {
          self.context.router.push("/postsfeed");
        }).catch(function(error) {
        });
    }

    render() {
        return(
            <div className="sign-in-div">
                <button className="sign-in-button" onClick={this.handleClick.bind(this)}>
                    Sign in with Google
                </button>
            </div>
        );
    }
}

export default Login;

/ * postsfeed.js * /

import React, { Component } from 'react';
import * as firebase from 'firebase';

class PostsFeed extends Component {

    render() {
        return(
            <div>Posts Feed</div>
        );
    }
}

export default PostsFeed;

/ * routes.js * /

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Login from './components/login';
import App from './components/app';
import PostsFeed from './components/postsfeed';

export default (
    <Route path="/" component={App} >
        <IndexRoute component={Login} />
        <Route path="postsfeed" component={PostsFeed} />
    </Route>
);

/ * app.js * /

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>{this.props.children}</div>
    );
  }
}

export default App;

0 个答案:

没有答案