index.js

import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'

import './passport.scss'
import { WithFullSize } from '@/HOCs'
import Login from './login'
import AccountLogin from './accountLogin'
import ForgotPassword from './forgotPassword'
import SetPassword from './setPassword'
import BindingTel from './bindingTel'
import { connect } from "react-redux";
import { compose } from "redux";

import account from './account.png'
import qq from './qq.png'
import sina from './sina.png'
import wechat from './wechat.png'


class Passport extends Component {

    redirect_url = location.protocol + '//' + location.hostname

    constructor(props) {
        super(props);
        this.state = {
            loginWays: [
                {
                    logo: account,
                    text: '账号登录'
                },
                {
                    logo: wechat,
                    text: '微信',
                    url: 'https://www.baidu.com'
                },
                {
                    logo: qq,
                    text: 'QQ',
                    url: `${API["passport-api"]}/mob/qqlogin?redirect_url=${location.href}`
                },
                {
                    logo: sina,
                    text: '新浪',
                    url: `${API['passport-api']}/mob/sinalogin?redirect_url=${this.redirect_url}`
                },
            ]
        }
    }


    componentDidMount() {
        this.routeWhenUserLoggedIn()

    }

    componentDidUpdate() {
        this.routeWhenUserLoggedIn()
    }


    routeWhenUserLoggedIn = () => {
        let {history} = this.props
        let {data} = this.props.user
        if (data && Object.values(data).filter(item => !!item).length) {
            history.action === 'POP' && history.length <= 3 ? history.push('/') : history.go(-1)
        }
    }


    render() {
        console.log(this.props);
        let {match, location} = this.props
        return (
            <div className="passport">
                <Switch>
                    <Redirect exact
                              from={'/passport'}
                              to={{...location, ...{pathname: '/passport/login'}}}
                    />
                    <Route path={match.url + '/login'}
                           render={props => {
                               return <Login {...props} loginWays={this.state.loginWays}/>
                           }}/>
                    <Route path={match.url + '/account-login'} component={AccountLogin}/>
                    <Route path={match.url + '/forgot-password'} component={ForgotPassword}/>
                    <Route path={match.url + '/set-password'} component={SetPassword}/>
                    <Route path={match.url + '/binding-tel'} component={BindingTel}/>
                </Switch>
            </div>
        )
    }
}


export default compose(
    connect(
        state => ({user: state.user}),
        null
    ),
    WithFullSize
)(Passport)