react-navigation通过redux中间件来做登录验证

创建一个登录验证中间件

createLoginMiddleware.js
import {NavigationActions} from "react-navigation"

function createLoginMiddleware() {
    return ({dispatch, getState}) => next => action => {
        // 判断action type是否为NAVIGATE类型 并且是需要验证的页面
        if (action.type == NavigationActions.NAVIGATE && (action.routeName == 'Trade' || action.routeName == 'LiveTelecast')) {
            const state = getState()
            let appLoginState = state.getIn(['loginState', 'appLoginState']);
            // 判断登录状态
            if (!appLoginState) {
                // 没有登录者跳转到登录页面
                dispatch({type: NavigationActions.NAVIGATE, routeName: 'AppLogin'})
                return
            }
        }
        return next(action)
    }
}

export default createLoginMiddleware

添加中间件

configureStore.prod.js
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Map } from 'immutable'

import { socket } from './io'
import createSocketIoMiddleware from './socketIo'
import createLoginMiddleware from './loginMiddleware'
import getReducers from '../reducers/index'

// socket中间件
const socketMiddleware = createSocketIoMiddleware(socket)
// 登录验证中间件
const loginMiddleware = createLoginMiddleware()

function configureStore(navReducer, initialState = Map()) {
    let enhancer = compose(
        applyMiddleware(socketMiddleware, loginMiddleware, thunk)
    )
    return createStore(getReducers(navReducer), initialState, enhancer)
}

export default configureStore

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 132,662评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 45,208评论 6 345
  • React中没有类似Angular那样的双向数据绑定,在做一些表单复杂的后台类页面时,监听、赋值、传递、校验时编码...
    tedyuen777阅读 9,612评论 1 23
  • 今天是夏令营的第四天,也是各个小战士们在营地的最后一晚,即将结营回家喜悦的心情都挂在脸上,一个个心花怒放,内向的不...
    总会等到那一天阅读 316评论 1 1
  • 中午出去吃饭在回来的路上正抱怨各种饭都不好吃的时候,看见了小时候吃的一种零食,学名叫什么不知道,俗称“焦米贵”,于...
    小章女子阅读 364评论 1 1