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'
import { getParam } from "@/utils";


class Passport extends Component {

    redirectURL = '/'

    constructor(props) {
        super(props);
        const {location} = props
        const {pathname, search, hash} = location
        const {from} = location.state || {from: {pathname: pathname, search: search, hash: hash}}
        this.redirectURL = window.location.origin + from.pathname + from.search + from.hash
        this.state = {
            loginWays: [
                {
                    logo: account,
                    text: '账号登录'
                },
                {
                    logo: wechat,
                    text: '微信',
                    url: ''
                },
                {
                    logo: qq,
                    text: 'QQ',
                    url: `${API["passport-api"]}/mob/qqlogin?redirect_url=${this.redirectURL}`
                },
                {
                    logo: sina,
                    text: '新浪',
                    url: `${API['passport-api']}/mob/sinalogin?redirect_url=${this.redirectURL}`
                },
            ]
        }
    }


    componentDidMount() {
        this.routeWhenUserLoggedIn()
    }

    componentDidUpdate() {
        this.routeWhenUserLoggedIn()
    }


    routeWhenUserLoggedIn = () => {
        let {history, location} = this.props
        let {data} = this.props.user
        if (data && Object.values(data).filter(item => !!item).length) {
            if (history.action === 'POP' && history.length <= 3) {
                history.push('/')
            } else {
                if (!(this.props.user && this.props.user.stage)) {
                    const from = location.state && location.state.from || {pathname: '/', search: ''};
                    const redirectURI = getParam('redirect')
                    redirectURI ? (window.location.href = redirectURI) : history.replace(from);
                }
            }
        }
    }


    render() {
        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)