无痕验证

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'
 
 
@@ -8,7 +8,7 @@ const accountLogin = user => dispatch => {
     user_name: user.username,
     password: encrypt(user.password),
     is_encrypt: 1,
-        redirect: encodeURIComponent(user.redirect)
+    redirect: encodeURIComponent(user.redirect),
   }).then(res => {
     return storeUser(res, dispatch)
   })
@@ -27,16 +27,16 @@ const studentLogin = params => dispatch => {
     redirect: encodeURIComponent(params.redirect),
     type: 1,
   }).then(res => {
-        const { errno, data } = res.data;
+    const {errno, data} = res.data;
     let result = {};
-        if(errno === 0) {
+    if (errno === 0) {
       result = {
         data: {
           errno: 200,
           data,
-                }
+        },
       };
-        }else {
+    } else {
       result = res;
     }
     return storeUser(result, dispatch);
@@ -46,7 +46,7 @@ const studentLogin = params => dispatch => {
 const quickLogin = user => dispatch => {
   return http.post(`${API['passport-api']}/m/login/quickLogin`, {
     ...user,
-        plat: 5
+    plat: 5,
   }).then(res => {
     return storeUser(res, dispatch)
   })
@@ -56,18 +56,18 @@ 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
+    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}
+      data: {username, avatar, isVIP, ...rest},
     }
   } else {
     payload = {
       hasError: true,
       msg: data.msg,
       data: {},
-            code: data.errno
+      code: data.errno,
     }
   }
   dispatch(setCurrentUser(payload))
@@ -79,7 +79,7 @@ const storeUser = (res, dispatch) => {
 const SET_CURRENT_USER = 'SET_CURRENT_USER'
 const setCurrentUser = payload => ({
   type: SET_CURRENT_USER,
-    payload: {...payload, isFetching: false}
+  payload: {...payload, isFetching: false},
 })
 
 
@@ -94,12 +94,17 @@ const logout = () => dispatch => {
 const UPDATE_USER = 'UPDATE_USER'
 const updateUser = payload => ({
   type: UPDATE_USER,
-    payload
+  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,
 })
 
 
@@ -114,4 +119,6 @@ export {
   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
 
@@ -13,9 +13,9 @@ export const initialState = {
     isVip: false,
     token: '',
     email: '',
-        uid: ''
+    uid: '',
   },
-    isFetching: true
+  isFetching: true,
 }
 
 
@@ -27,6 +27,8 @@ export default function (state = initialState, action) {
       return merge({}, state, action.payload)
     case START_FETCH_USER:
       return {...state, isFetching: true}
+    case END_FETCH_USER:
+      return {...state, isFetching: false}
     default:
       return state
   }