微信登录

scripts/start.js

@@ -41,8 +41,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-// const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 80;
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 80;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {

src/App.js

@@ -2,9 +2,13 @@ import React, { Component } from 'react'
 import Routes from './router'
 import cookie from 'js-cookie'
 import { connect } from "react-redux";
-import { setCurrentUser } from "@/store/userAction";
+import { setCurrentUser, startFetchUser } from "@/store/userAction";
 import { withRouter } from 'react-router-dom'
 import { compose } from 'redux'
+import { api, getParam, http } from "@/utils";
+import { Toast } from "antd-mobile";
+import jsCookie from 'js-cookie'
+import { addDays } from 'date-fns'
 
 
 //拦截ajax请求，返回mock数据
@@ -17,30 +21,25 @@ import './assets/css/index.scss';
 
 // iconfont
 import './assets/font/iconfont.css';
-import { api, getParam, http, isLogin } from "@/utils";
-import { Toast } from "antd-mobile";
 
 class App extends Component {
 
 
     componentDidMount() {
-        console.log(this.props.history);
-
         //平台信息
         cookie.set('plat', '5')
 
+        this.props.startFetchUser()
         http.get(`${api.home}/m/user_info`).then(res => {
             this.props.setCurrentUser(this.transformUser(res))
         })
 
 
         let code = getParam('code')
-        let {history, state, location} = this.props
-
 
         if (code) {
 
-            http.get(`${api['base-api']}/m/wx_loginInfo/code/${code}`)
+            http.get(`${api['home']}/m/wx_loginInfo/code/${code}`)
                 .then(res => {
                     let data = res.data
                     console.log(res)
@@ -49,7 +48,13 @@ class App extends Component {
                             window.location.assign(data.data.url)
 
                         } else {
-                            console.log(this.props.location)
+                            let user = this.transformWxUser(res)
+                            let {role, uid, token} = data.data
+                            let expires = {expires: addDays(new Date(), 90)}
+                            jsCookie.set('role', role, expires)
+                            jsCookie.set('uid', uid, expires)
+                            jsCookie.set('token', token, expires)
+                            this.props.receiveUser(user)
                         }
                     } else {
                         Toast.info(data.msg)
@@ -58,17 +63,6 @@ class App extends Component {
 
 
         }
-        /*else {
-
-            if (isLogin) {
-                console.log(location.pathname);
-                // history.replace(location.pathname)
-            } else {
-                console.log(state);
-                history.replace('/passport', {...state})
-
-            }
-        }*/
 
 
     }
@@ -108,6 +102,32 @@ class App extends Component {
         return payload
     }
 
+    transformWxUser = res => {
+        let data = res.data
+        if (data.errno == 200) {
+            let {uid, token, avatar_file: avatar, uname: username,} = data.data
+
+            return {
+                hasError: false,
+                data: {
+                    uid,
+                    token,
+                    avatar,
+                    username
+                },
+                msg: data.msg
+            }
+        } else {
+            let {code, msg} = data.data
+            return {
+                code,
+                msg,
+                hasError: true,
+                data: {}
+            }
+        }
+    }
+
     render() {
         return <Routes/>
     }
@@ -116,7 +136,7 @@ class App extends Component {
 export default compose(
     connect(
         null,
-        {setCurrentUser}
+        {setCurrentUser, startFetchUser}
     ),
     withRouter
 )(App)
\ No newline at end of file

src/components/passport/common/LoginWays/index.js

 import React, { PureComponent } from 'react';
+import { browser } from "@/utils";
 import './loginWays.scss'
 
 
 class LoginWays extends PureComponent {
 
-    handleClick = (index) => {
-        this.props.onClick(index)
+    state = {
+        ways: this.props.loginWays
+    }
+
+    componentDidMount() {
+        if (!browser.isWeixin) {
+            this.setState({
+                ways: this.state.ways.filter(item => item.text !== '微信')
+            })
+        }
+    }
+
+
+    handleClick = text => {
+        this.props.onClick(text)
     }
 
     render() {
@@ -14,7 +28,7 @@ class LoginWays extends PureComponent {
                 <div className="bottom-title">其他登录方式</div>
                 <ul className='login-ways-container'>
                     {
-                        this.props.loginWays.map((item, index) => {
+                        this.state.ways.map((item, index) => {
                             return (
                                 <li key={index} onClick={this.handleClick.bind(this, item.text)}>
                                     <img src={item.logo} alt=""/>

src/components/passport/index.js

@@ -15,7 +15,6 @@ import account from './account.png'
 import qq from './qq.png'
 import sina from './sina.png'
 import wechat from './wechat.png'
-import { api, http } from "@/utils";
 
 
 class Passport extends Component {
@@ -45,7 +44,6 @@ class Passport extends Component {
                     logo: sina,
                     text: '新浪',
                     url: `http://passport-test.julyedu.com/mob/sinalogin?redirect_url=${this.redirect_url}`
-
                 },
             ]
         }

src/components/passport/login/index.js

@@ -21,11 +21,6 @@ class Login extends Component {
         captchaInstance: null
     }
 
-    componentDidMount() {
-        console.log(this.props);
-    }
-
-
     loginWaysClick = method => {
         const {history, loginWays, location} = this.props
 
@@ -40,7 +35,7 @@ class Login extends Component {
 
                 const redirectURI = window.location.protocol + '//' + window.location.hostname + from.pathname
 
-                alert(redirectURI)
+                // alert(redirectURI)
                 window.location.assign(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=${encodeURIComponent(redirectURI)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`)
                 break;
             default:

src/components/passport/setPassword/index.js

@@ -16,11 +16,6 @@ import { connect } from "react-redux";
 
 class SetPassword extends Component {
 
-    componentDidMount() {
-        console.log(this.props.location);
-    }
-
-
     render() {
         let {values, errors, location} = this.props
         let {from} = location.state || {from: {pathname: '/'}}
@@ -84,7 +79,7 @@ const formikConfig = {
 
     },
     validateOnChange: false,
-    validate: (values) => {
+    validate: values => {
         let errors = {}
         const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
         if (!re.test(values.password)) {
@@ -128,7 +123,7 @@ function bindMobileSetPassword(values, props) {
         .then(res => {
             if (res.data.errno == 200) {
                 Toast.info('密码设置成功')
-                let from = getFrom(props.location)
+                let {from} = location.state || {from: {pathname: '/'}}
                 setTimeout(function () {
                     props.history.replace(from.pathname)
                 }, 1000)
@@ -138,10 +133,6 @@ function bindMobileSetPassword(values, props) {
         })
 }
 
-function getFrom(location) {
-    return {from} = location.state || {from: {pathname: '/'}}
-}
-
 export default compose(
     connect(
         state => ({user: state.user}),

src/router/loading.js

-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import { withRouter } from "react-router-dom";
-import { api, http, getParam, isLogin } from "@/utils";
-import { Toast } from "antd-mobile";
+import { compose } from "redux";
+import { connect } from "react-redux";
 
 
-class Loading extends Component {
+function Loading(props) {
 
-
-    async componentDidMount() {
-
-        let code = getParam('code')
-        let {history, state, location} = this.props
-
-
-        if (code) {
-
-            http.get(`${api['base-api']}/m/wx_loginInfo/code/${code}`)
-                .then(res => {
-                    let data = res.data
-                    console.log(res)
-                    if(data.errno == 200){
-                        if(data.data['is_bind_mobile']){
-                            window.location.assign(data.data.url)
-
-                        }else {
-                            console.log(this.props.location)
-                        }
-                    }else {
-                        Toast.info(data.msg)
-                    }
-                })
-
-
-        } else {
-
-            if (isLogin) {
-                console.log(location.pathname);
-                // history.replace(location.pathname)
+    useEffect(() => {
+        let {user, location, history} = props
+        if (!user.isFetching) {
+            if (user.hasError) {
+                history.push('/passport', {from: location})
             } else {
-                console.log(state);
-                history.replace('/passport', {...state})
-
+                if (Object.values(user.data).every(item => !!item).length !== 0) {
+                    history.push(location.pathname)
                 }
             }
         }
+    })
 
-
-    render() {
     return (
         <div className={'loading'}>
             loading...
         </div>
     );
-    }
 }
 
-export default withRouter(Loading)
+export default compose(
\ No newline at end of file
+    connect(
+        state => ({user: state.user}),
+        null
+    ),
+    withRouter
+)(Loading)
\ No newline at end of file

src/router/router-config.js

@@ -16,7 +16,7 @@ import Examination from '@/components/examination'
 import ShopCart from '@/components/shopCart';
 import BargainMiddlePage from '@/components/bargainMiddlePage';
 import Passport from '@/components/passport';
-import {Scholarship} from '@/components/scholarship/index';
+import { Scholarship } from '@/components/scholarship/index';
 import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
 import PayOrder from '@/components/order/payOrder/PayOrder'
 

src/store/userAction.js

@@ -45,7 +45,7 @@ const storeUser = (res, dispatch) => {
 const SET_CURRENT_USER = 'SET_CURRENT_USER'
 const setCurrentUser = payload => ({
     type: SET_CURRENT_USER,
-    payload
+    payload: {...payload, isFetching: false}
 })
 
 
@@ -63,6 +63,12 @@ const updateUser = payload => ({
     payload
 })
 
+const START_FETCH_USER = 'START_FETCH_USER'
+const startFetchUser = () => ({
+    type: START_FETCH_USER
+})
+
+
 export {
     accountLogin,
     SET_CURRENT_USER,
@@ -70,5 +76,7 @@ export {
     quickLogin,
     logout,
     UPDATE_USER,
-    updateUser
+    updateUser,
+    START_FETCH_USER,
+    startFetchUser,
 }
\ No newline at end of file

src/store/userReducer.js

-import { SET_CURRENT_USER, UPDATE_USER } from '@/store/userAction';
+import { SET_CURRENT_USER, UPDATE_USER, START_FETCH_USER } from '@/store/userAction';
 import { merge } from 'lodash'
 
 
@@ -12,7 +12,8 @@ const initialState = {
         token: '',
         email: '',
         uid: ''
-    }
+    },
+    isFetching: true
 }
 
 
@@ -22,6 +23,8 @@ export default function (state = initialState, action) {
             return action.payload
         case UPDATE_USER:
             return merge({}, state, action.payload)
+        case START_FETCH_USER:
+            return {...state, isFetching: true}
         default:
             return state
     }