如何处理 Redux 中的注销路由？答案

【问题标题】：How to handle logout route in Redux?如何处理 Redux 中的注销路由？
【发布时间】：2016-04-15 16:09:41
【问题描述】：

我想定义一个可用于注销用户的 URL（调度一个将注销用户的操作）。我还没有找到展示如何实现路由调度事件的示例。

【问题讨论】：

为什么不在链接点击上发送一个动作呢？不需要特殊的注销路径
从用户的角度来看，我希望能够使用 URL 访问注销功能。
我猜如果你有 Redux，你正在开发一个单页应用程序，它不能使用 Javascript。那么，有一个公开的链接有什么意义呢？
再次，作为“高级用户”，我喜欢键入 URL 来执行操作，例如能够销毁我的会话。应用是否是 SPA，与它无关。
“会话”持续存在于客户端 (window.localStorage)。那是一个标准的 JSON Web Token 认证实现。后端不知道用户会话。根据定义，REST 是无状态的 (en.wikipedia.org/wiki/Representational_state_transfer#Stateless)。

标签： react-router redux react-router-redux

【解决方案1】：

这是/logout 页面的最新实现：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";

import * as authActionCreators from "../actions/auth";

class LogoutPage extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired
  };

  componentWillMount() {
    this.props.dispatch(authActionCreators.logout());
  }

  render() {
    return (
      <Redirect to="/" />
    );
  }

}

export default connect()(LogoutPage);

适用于：

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"prop-types": "^15.5.10",

【讨论】：

【解决方案2】：

以下是此类/logout 页面的最新实现：

import { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import * as authActionCreators from '../actions/auth'

class LogoutPage extends Component {

  componentWillMount() {
    this.props.dispatch(authActionCreators.logout())
    this.props.router.replace('/')
  }

  render() {
    return null
  }
}
LogoutPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  router: PropTypes.object.isRequired
}

export default withRouter(connect()(LogoutPage))

【讨论】：

您能解释一下是什么使它成为“更现代”的实现吗？
同意 - 我不会说这是一个更新的实现，而是使用 react-router 而不是 redux-simple-router 的替代实现。我认为这适合大多数使用更常用的 react-router 的用例并包括最近引入的“withRouter”功能，所以为什么要评论。 :-)
首先，请注意，无论有没有 redux-simple-router（顺便说一下，它不久前被重命名为 react-router-redux），这个实现都可以工作。如果您愿意，您可以使用 Redux 样式的操作，但这不是必需的，恕我直言，它与原始路由问题没有严格的关系。此实现还利用了最近引入的withRouter 高阶组件，使其更简单:)
withRouter 应该在 connect 附近，而不是相反（以防止屏幕刷新问题）
@Marc 你能详细说明一下吗？

【解决方案3】：

定义路由/authentication/logout:

import React from 'react';
import {
    Route,
    IndexRoute
} from 'react-router';
import {
    HomeView,
    LoginView,
    LogoutView
} from './../views';

export default <Route path='/'>
    <IndexRoute component={HomeView} />

    <Route path='/authentication/logout'component={LogoutView} />
    <Route path='/authentication/login' component={LoginView} />
</Route>;

创建一个LogoutView，在componentWillMount 上调度一个动作：

import React from 'react';
import {
    authenticationActionCreator
} from './../actionCreators';
import {
    connect
} from 'react-redux';
import {
    pushPath
} from 'redux-simple-router';

let LogoutView;

LogoutView = class extends React.Component {
    componentWillMount () {
        this.props.dispatch(authenticationActionCreator.logout());
        this.props.dispatch(pushPath('/'));
    }

    render () {
        return null;
    }
};

export default connect()(LogoutView);

componentWillMount 回调调度两个动作：

销毁用户会话。
将用户重定向到IndexRoute。

this.props.dispatch(authenticationActionCreator.logout());
this.props.dispatch(pushPath('/'));

【讨论】：

我不能 100% 确定是否应该这样处理注销场景。如果这不是规范方法，请提出修改建议或添加您的答案。
最好将logout 和pushPath 操作分开。 pushPath 应该在 componentDidMount
@just-boris 这是什么原因？
让事情顺利进行。某些组件可能还想在注销时更新，但您会立即触发路由更改。如果您在这里没有问题，这只是我个人的观点，可以保持原样。
感谢您的澄清。