无痕验证

src/App.js

-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import Routes from './router'
 import cookie from 'js-cookie'
-import { connect } from 'react-redux'
-import { setCurrentUser, startFetchUser } from '@/store/userAction'
+import {connect} from 'react-redux'
+import {setCurrentUser, startFetchUser, endFetchUser} from '@/store/userAction'
 import {
   updateCaptchaState,
   closeCaptchaModal,
   showCaptchaModal,
   validationPassed,
+  startFetchValidationState,
+  endFetchValidationState,
 } from '@/store/no-trace-validation/reducer'
-import { initialState } from '@/store/userReducer'
-import { withRouter } from 'react-router-dom'
-import { compose } from 'redux'
-import { getParam, http, browser, loadScript, getTimestamp } from '@/utils'
-import { Toast } from 'antd-mobile'
-import { addDays } from 'date-fns'
+import {initialState} from '@/store/userReducer'
+import {withRouter} from 'react-router-dom'
+import {compose} from 'redux'
+import {getParam, http, browser, loadScript, getTimestamp} from '@/utils'
+import {Toast} from 'antd-mobile'
+import {addDays} from 'date-fns'
 import stringify from 'json-stringify-safe'
 
 //拦截ajax请求，返回mock数据
@@ -189,7 +191,6 @@ class App extends Component {
       } : (location.state = {records: this.records})
   }
 
-
   utm = () => {
     // utm统计  m站全站统计广告投放、以及统计详情页浏览
     let zhihu_cb = getParam('cb')
@@ -214,19 +215,25 @@ class App extends Component {
     let code = getParam('code')
     let oid = getParam('oid')
     if (code && !oid) {
+      this.props.startFetchValidationState()
       http.get(`${API['passport-api']}/m/wx_loginInfo/code/${code}?redirect=${encodeURIComponent(window.location.href)}`)
         .then(res => {
           let data = res.data
           if (data.errno == 200) {
             if (data.data.is_check) {
               this.props.updateCaptchaState({
-                isNeedValidation: true
+                isNeedValidation: true,
               })
+              this.props.startFetchValidationState()
               this.setState({
                 mkey: data.data.mkey,
               });
               this.setupNoTraceValidate()
             } else {
+              this.props.updateCaptchaState({
+                isNeedValidation: false,
+                isFetching: false
+              })
               if (data.data['is_bind_mobile']) {
                 window.location.assign(data.data.url)
               } else {
@@ -234,6 +241,10 @@ class App extends Component {
               }
             }
           } else {
+            this.props.updateCaptchaState({
+              isNeedValidation: false,
+              isFetching: false
+            })
             Toast.info(data.msg)
             this.props.setCurrentUser(initialState)
           }
@@ -304,14 +315,11 @@ class App extends Component {
     }).then(res => {
       const {errno, msg, data} = res.data
       if (errno === 200) {
-
         this.props.validationPassed()
         this.handleLoginResponse(data)
-
       } else if (errno === 5002) {
-        this.props.updateCaptchaState({
-          isShowCaptcha: true
-        })
+        this.props.showCaptchaModal()
+        this.props.endFetchValidationState()
         typeof nvcReset === 'function' && nvcReset()
         typeof getNC === 'function' && getNC().then(() => {
           _nvc_nc.reset()
@@ -319,6 +327,8 @@ class App extends Component {
       } else {
         Toast.info(msg)
       }
+      this.props.endFetchUser()
+      this.props.endFetchValidationState()
     })
   }
 
@@ -459,6 +469,9 @@ export default compose(
     closeCaptchaModal,
     showCaptchaModal,
     validationPassed,
+    endFetchUser,
+    startFetchValidationState,
+    endFetchValidationState,
   }),
   withRouter,
 )(App)

src/components/activity/2020-717/invitation/index.js

-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './index.scss'
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { HeaderBar } from "@common/index"
-import { getParam, http, browser, wxShare } from "@/utils"
-import { Toast } from "antd-mobile";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Link } from 'react-router-dom'
+import {connect} from "react-redux";
+import {compose} from "redux";
+import {HeaderBar} from "@common/index"
+import {getParam, http, browser, wxShare} from "@/utils"
+import {Toast} from "antd-mobile";
+import {CopyToClipboard} from "react-copy-to-clipboard";
+import {Link} from 'react-router-dom'
 import storage from 'store2'
-import { CaptchaAli } from "@common/index"
-import { showCaptchaModal } from "@/store/no-trace-validation/reducer";
+import {CaptchaAli} from "@common/index"
+import {showCaptchaModal} from "@/store/no-trace-validation/reducer";
 
 
 class Invitation extends Component {
@@ -96,11 +96,15 @@ class Invitation extends Component {
 
   joinTeam = data => {
     const {user, history, noTraceValidation, showCaptchaModal} = this.props
-    if(user.isFetching){
+    if (noTraceValidation.isFetching) {
       return
     }
-    if (noTraceValidation.isNeedValidation && !noTraceValidation.isShowCaptcha) {
-      showCaptchaModal()
+    if (noTraceValidation.isNeedValidation) {
+      !noTraceValidation.isShowCaptcha && showCaptchaModal()
+      return
+    }
+
+    if (user.isFetching) {
       return
     }
 

src/store/no-trace-validation/reducer.js

@@ -27,9 +27,20 @@ export const validationPassed = () => {
   }
 }
 
+const START_FETCHING = 'START_FETCHING'
+export const startFetchValidationState = () => ({
+  type: START_FETCHING,
+})
+
+const END_FETCHING = 'END_FETCHING'
+export const endFetchValidationState = () => ({
+  type: END_FETCHING,
+})
+
 const initialState = {
   isShowCaptcha: false,
   isNeedValidation: false,
+  isFetching: false,
 }
 
 export default function noTraceValidation(state = initialState, action) {
@@ -49,10 +60,21 @@ export default function noTraceValidation(state = initialState, action) {
         ...state,
         ...{isShowCaptcha: false},
       }
+    case START_FETCHING:
+      return {
+        ...state,
+        isFetching: true,
+      }
     case VALIDATION_PASSED:
       return {
         isNeedValidation: false,
         isShowCaptcha: false,
+        isFetching: false,
+      }
+    case END_FETCHING:
+      return {
+        ...state,
+        isFetching: false,
       }
     default:
       return state

src/store/userAction.js

-import { http } from '@/utils';
-import { encrypt } from '@/components/passport/encryption';
+import {http} from '@/utils';
+import {encrypt} from '@/components/passport/encryption';
 import jsCookie from 'js-cookie'
 
 
 const accountLogin = user => dispatch => {
-    return http.post(`${API['passport-api']}/m/login/accountLogin`, {
-        user_name: user.username,
-        password: encrypt(user.password),
-        is_encrypt: 1,
-        redirect: encodeURIComponent(user.redirect)
-    }).then(res => {
-        return storeUser(res, dispatch)
-    })
+  return http.post(`${API['passport-api']}/m/login/accountLogin`, {
+    user_name: user.username,
+    password: encrypt(user.password),
+    is_encrypt: 1,
+    redirect: encodeURIComponent(user.redirect),
+  }).then(res => {
+    return storeUser(res, dispatch)
+  })
 }
 
 const studentLogin = params => dispatch => {
-    return http.post(`${API['passport-api']}/phone_reg`, {
-        phone: params.tel,
-        password: params.password,
-        code: params.code,
-        area_code: params.num,
-        school_name:  params.school,
-        college_name: params.college,
-        student_id: params.uid,
-        student_name: params.name,
-        redirect: encodeURIComponent(params.redirect),
-        type: 1,
-    }).then(res => {
-        const { errno, data } = res.data;
-        let result = {};
-        if(errno === 0) {
-            result = {
-                data: {
-                    errno: 200,
-                    data,
-                }
-            };
-        }else {
-            result = res;
-        }
-        return storeUser(result, dispatch);
-    });
+  return http.post(`${API['passport-api']}/phone_reg`, {
+    phone: params.tel,
+    password: params.password,
+    code: params.code,
+    area_code: params.num,
+    school_name: params.school,
+    college_name: params.college,
+    student_id: params.uid,
+    student_name: params.name,
+    redirect: encodeURIComponent(params.redirect),
+    type: 1,
+  }).then(res => {
+    const {errno, data} = res.data;
+    let result = {};
+    if (errno === 0) {
+      result = {
+        data: {
+          errno: 200,
+          data,
+        },
+      };
+    } else {
+      result = res;
+    }
+    return storeUser(result, dispatch);
+  });
 }
 
 const quickLogin = user => dispatch => {
-    return http.post(`${API['passport-api']}/m/login/quickLogin`, {
-        ...user,
-        plat: 5
-    }).then(res => {
-        return storeUser(res, dispatch)
-    })
+  return http.post(`${API['passport-api']}/m/login/quickLogin`, {
+    ...user,
+    plat: 5,
+  }).then(res => {
+    return storeUser(res, dispatch)
+  })
 }
 
 const storeUser = (res, dispatch) => {
-    const data = res.data
-    let payload
-    if (data.errno === 200) {
-        const {user_name: username, avatar_file: avatar,is_vip: isVIP, ...rest} = data.data.user_info
-        payload = {
-            hasError: false,
-            msg: data.msg,
-            data: {username, avatar,isVIP, ...rest}
-        }
-    } else {
-        payload = {
-            hasError: true,
-            msg: data.msg,
-            data: {},
-            code: data.errno
-        }
+  const data = res.data
+  let payload
+  if (data.errno === 200) {
+    const {user_name: username, avatar_file: avatar, is_vip: isVIP, ...rest} = data.data.user_info
+    payload = {
+      hasError: false,
+      msg: data.msg,
+      data: {username, avatar, isVIP, ...rest},
     }
-    dispatch(setCurrentUser(payload))
-    return payload
+  } else {
+    payload = {
+      hasError: true,
+      msg: data.msg,
+      data: {},
+      code: data.errno,
+    }
+  }
+  dispatch(setCurrentUser(payload))
+  return payload
 
 }
 
 
 const SET_CURRENT_USER = 'SET_CURRENT_USER'
 const setCurrentUser = payload => ({
-    type: SET_CURRENT_USER,
-    payload: {...payload, isFetching: false}
+  type: SET_CURRENT_USER,
+  payload: {...payload, isFetching: false},
 })
 
 
 const LOGOUT = 'LOGOUT'
 const logout = () => dispatch => {
-    jsCookie.remove('token', {path: '/', domain: '.julyedu.com'})
-    jsCookie.remove('uid', {path: '/', domain: '.julyedu.com'})
-    dispatch(setCurrentUser({hasError: true}))
+  jsCookie.remove('token', {path: '/', domain: '.julyedu.com'})
+  jsCookie.remove('uid', {path: '/', domain: '.julyedu.com'})
+  dispatch(setCurrentUser({hasError: true}))
 }
 
 
 const UPDATE_USER = 'UPDATE_USER'
 const updateUser = payload => ({
-    type: UPDATE_USER,
-    payload
+  type: UPDATE_USER,
+  payload,
 })
 
 const START_FETCH_USER = 'START_FETCH_USER'
 const startFetchUser = () => ({
-    type: START_FETCH_USER
+  type: START_FETCH_USER,
+})
+
+const END_FETCH_USER = 'END_FETCH_USER'
+const endFetchUser = () => ({
+  type: END_FETCH_USER,
 })
 
 
 export {
-    accountLogin,
-    studentLogin,
-    SET_CURRENT_USER,
-    setCurrentUser,
-    quickLogin,
-    logout,
-    UPDATE_USER,
-    updateUser,
-    START_FETCH_USER,
-    startFetchUser,
+  accountLogin,
+  studentLogin,
+  SET_CURRENT_USER,
+  setCurrentUser,
+  quickLogin,
+  logout,
+  UPDATE_USER,
+  updateUser,
+  START_FETCH_USER,
+  startFetchUser,
+  END_FETCH_USER,
+  endFetchUser,
 }

src/store/userReducer.js

-import { SET_CURRENT_USER, UPDATE_USER, START_FETCH_USER } from '@/store/userAction';
-import { merge } from 'lodash'
+import {SET_CURRENT_USER, UPDATE_USER, START_FETCH_USER, END_FETCH_USER} from '@/store/userAction';
+import {merge} from 'lodash'
 
 const notLoggedIn = 4030
 
 export const initialState = {
-    hasError: true,
-    code: notLoggedIn,
-    msg: '',
-    data: {
-        username: '',
-        avatar: '',
-        isVip: false,
-        token: '',
-        email: '',
-        uid: ''
-    },
-    isFetching: true
+  hasError: true,
+  code: notLoggedIn,
+  msg: '',
+  data: {
+    username: '',
+    avatar: '',
+    isVip: false,
+    token: '',
+    email: '',
+    uid: '',
+  },
+  isFetching: true,
 }
 
 
 export default function (state = initialState, action) {
-    switch (action.type) {
-        case SET_CURRENT_USER:
-            return action.payload
-        case UPDATE_USER:
-            return merge({}, state, action.payload)
-        case START_FETCH_USER:
-            return {...state, isFetching: true}
-        default:
-            return state
-    }
+  switch (action.type) {
+    case SET_CURRENT_USER:
+      return action.payload
+    case UPDATE_USER:
+      return merge({}, state, action.payload)
+    case START_FETCH_USER:
+      return {...state, isFetching: true}
+    case END_FETCH_USER:
+      return {...state, isFetching: false}
+    default:
+      return state
+  }
 }