为组件的特定部分设置授权答案

【问题标题】：Setting Authorization to specific parts of a component为组件的特定部分设置授权
【发布时间】：2018-12-26 11:54:01
【问题描述】：

我有一个事件组件，它显示数据库中所有事件的列表。

总的来说，我对授权和 react/redux 还很陌生我不知道如何正确地进行授权。

我希望每个人都能看到所有的事件以及当您单击它时，您会看到该特定活动的可用门票（现在它显示所有活动的所有门票，我将不得不稍后修复）

但我想要的主要事情现在已经发生了

是不是访问者未登录时不显示“创建活动”按钮或者它被显示，但是当访问者点击它时他们没有登录他们被重定向到 /login 页面

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllEvents, getEvent, addEvent } from "../../actions/events";
import { getUsers } from '../../actions/users'
import Paper from "@material-ui/core/Paper";
import Moment from "moment";
import { Redirect } from "react-router-dom";

class EventsList extends PureComponent {


  componentWillMount() {
    this.props.getAllEvents();
  }

  getEvent(eventId) {
    this.props.getEvent(eventId);
  }

  addEvent = event => {
    this.props.addEvent(event);
  };

  render() {
    const { events, authenticated } = this.props;
    const eventsList = events.sort((a, b) =>{
     return a.id - b.id;
   });

    if (!authenticated) return <Redirect to="/login" />;


    return (
      <div>
        <Paper className="styles" elevation={4}>
          <h1>Coming Events</h1>
          <table>
            <thead>
              <tr>
                <th>Event Name</th>
                <th>Starts</th>
                <th>Ends</th>
              </tr>
            </thead>
            <tbody>
              {eventsList.map(event => (
                <tr key={event.id}>
                  <td>
                    {" "}
                    <Link
                      className="link"
                      to={`/events/${event.id}`}
                      onClick={() => this.getEvent(event.id)}
                    >
                      {event.name}
                    </Link>
                  </td>

                                <td style={{border:"2px solid black"}}> {Moment(event.startDate).format('ll')}</td>

                                <td style={{ border: "2px solid black" }}>  {Moment(event.endDate).format('ll')}</td>
                  <td />
                </tr>
              ))}
            </tbody>
          </table>
          <br />
          <br />
          <Link className="link" to={`/createEvent`}>
            CREATE EVENT
          </Link>
        </Paper>
      </div>
    );
  }
}

const mapStateToProps = function(state) {
  console.log('users', state.users)
  return {
    events: state.events,
    event: state.event,
    authenticated: state.currentUser !== null,
    users: state.users === null ? null : state.users
  };
};

export default connect(
  mapStateToProps,
  {
    getAllEvents,
    getEvent,
    addEvent,
    getUsers
  }
)(EventsList);

任何建议

【问题讨论】：

标签： javascript reactjs redirect react-router authorization

【解决方案1】：

嗯，要隐藏按钮，你可以这样做

{ if(this.props.authenticated) {
    <Link className="link" to={`/createEvent`}>
      CREATE EVENT
    </Link>
}}

要根据用户是否通过身份验证来处理重定向，您可以使用Link 的 onClick 事件（我不确定Link 组件是否公开了 onClick 事件，如果没有，只需将其更改为常规按钮）。

<Link className="link" onClick={this.onCreateEvent}> // maybe use a <button /> instead
  CREATE EVENT
</Link>

// ...

onCreateEvent() {
  if(this.props.authorized) this.props.history.push("/createEvent"); // this dependes on which version of React-Router you are using.
  else this.props.history.push("/login");
}

【讨论】：