深入理解redux-auth-wrapper中的Redux高级用法-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00270/article/details/148890625

深入理解redux-auth-wrapper中的Redux高级用法

redux-auth-wrapper A React Higher Order Component (HOC) for handling Authentication and Authorization with Routing and Redux 项目地址: https://gitcode.com/gh_mirrors/re/redux-auth-wrapper

前言

在React应用中，路由权限控制是一个常见的需求。redux-auth-wrapper作为一个强大的高阶组件库，能够帮助我们优雅地实现这一功能。本文将重点探讨如何在使用redux-auth-wrapper时结合Redux进行更高级的操作，特别是如何在重定向时派发额外的Redux action。

基础概念回顾

在开始高级用法之前，让我们先回顾几个关键概念：

redux-auth-wrapper：一个用于React应用的高阶组件，主要用于路由权限控制
高阶组件(HOC)：一种函数，接收一个组件并返回一个新的增强版组件
Redux中间件：位于action和reducer之间的扩展点，可以拦截和处理action

为什么需要重定向时派发额外action

在实际应用中，仅仅进行重定向可能不够完善。我们通常还需要：

显示友好的提示信息，告知用户为何被重定向
记录重定向事件用于分析
更新应用状态以反映权限验证失败

实现方案详解

准备工作

首先确保你的项目中已经配置了redux-thunk中间件，因为我们需要在重定向时执行异步操作。

使用react-router-redux或redux-router的场景

import { replace } from 'react-router-redux';
import { connectedReduxRedirect } from 'redux-auth-wrapper/history3/redirect';
import addNotification from './notificationActions';

export const userIsAdmin = connectedReduxRedirect({
  redirectPath: '/app',
  allowRedirectBack: false,
  authenticatedSelector: state => state.user !== null && state.user.isAdmin,
  redirectAction: (newLoc) => (dispatch) => {
     dispatch(replace(newLoc));
     dispatch(addNotification({ 
       message: '抱歉，您不是管理员',
       type: 'error'
     }));
  },
  wrapperDisplayName: 'UserIsAdmin'
});

关键点解析：

redirectAction参数接受一个返回函数的函数（得益于redux-thunk）
首先派发路由替换action
接着派发通知action
这种链式调用确保了执行顺序

使用React Router历史对象单例的场景

import { browserHistory } from 'react-router';
import addNotification from './notificationActions';

export const userIsAdmin = connectedReduxRedirect({
  redirectPath: '/app',
  allowRedirectBack: false,
  authenticatedSelector: state => state.user !== null && state.user.isAdmin,
  redirectAction: (newLoc) => (dispatch) => {
     browserHistory.replace(newLoc);
     dispatch(addNotification({ 
       message: '抱歉，您不是管理员',
       type: 'error'
     }));
  },
  wrapperDisplayName: 'UserIsAdmin'
});

差异说明：