Как добавить выход в React on Rails в меню Гамбургер, я студент, кстати - PullRequest
Новая
       20

Как добавить выход в React on Rails в меню Гамбургер, я студент, кстати

0 голосов
/ 26 января 2019

Я использую React on Rails и в настоящее время выхожу из системы с использованием компонента ERB.Я создаю меню гамбургера для приложения и выхожу из него.В настоящее время он просто сидит в дебюте, используя <%= link_to "Logout", destroy_user_session_path, method: :delete %> в Rails.Я хотел бы поместить его в компонент React.Пожалуйста помоги.Я все еще новичок в использовании React на Rails.Код для этого ниже.

import React, { Component } from 'react'

class MenuContent extends Component {
  constructor(props) {
    super(props)

  }

  render() {
    return (
      <div className="menu">
        <div className="Logout">
        I'm trying to add the JavaScript code here. Here how I'm doing it in Ruby. 
 <%= link_to "Logout", destroy_user_session_path, method: :delete %>
        </div>

        <p className="hint">Click outside the menu to close it, or swipe it closed on touch device</p>
      </div>
    )
  }
}

export default MenuContent

Этот ^ импортируется сюда (ниже).Это работает с остальной частью кода.

import React, {Component} from 'react'
import CheeseburgerMenu from "cheeseburger-menu";
import HamburgerMenu from "react-hamburger-menu";
import MenuContent from "./MenuContent";

class Navbar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuOpen: false
    };
  }

  openMenu() {
    this.setState({ menuOpen: true });
  }

  closeMenu() {
    this.setState({ menuOpen: false });
  }
  render(){
    return(
      <div>
        <CheeseburgerMenu
          isOpen={this.state.menuOpen}
          closeCallback={this.closeMenu.bind(this)}>
          <MenuContent closeCallback={this.closeMenu.bind(this)} />
        </CheeseburgerMenu>

        <HamburgerMenu
          isOpen={this.state.menuOpen}
          menuClicked={this.openMenu.bind(this)}
          width={32}
          height={24}
          strokeWidth={3}
          rotate={0}
          color="black"
          borderRadius={0}
          animationDuration={0.5} />
      </div>
    )
  }
}

export default Navbar

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Я вышел из системы, работая с использованием этого кода.Спасибо всем, кто откликнулся.

import React, { Component } from 'react'
import axios from 'axios'

// import './menuContent.scss'

class MenuContent extends Component {
  constructor(props) {
    super(props)
  }
   handleLogout = () => {
const link = document.createElement('a');
link.setAttribute('href', '/users/sign_out');
link.setAttribute('rel', 'nofollow');
link.setAttribute('data-method', 'delete');
document.body.appendChild(link);
link.click();
}

  render() {
    return (
      <div className="grandMenu">
          <div className="menu">
            <div className="signButton"></div>
              <button onClick={this.handleLogout}>Sign Out</button>
            <p>hello world</p>
          </div>
            <p className="hint">
              Click outside the menu to close it, or swipe it away.
            </p>
        </div>
    )
  }
}


export default MenuContent

PS Стоит упомянуть об этом раньше.Вход через API и использование Devise.

0 голосов
/ 26 января 2019

Вы можете выйти из системы через клиентскую часть.Все, что делает session, - это настройка файлов cookie браузера.Вы проверяете это, открывая консоль и набирая 

document.cookie

Если вы вошли в систему, вы можете увидеть что-то вроде 

"auth_token=icHQZ7QB5WK1PPXCWIiF0A"

auth_token - имя файла cookie.Чтобы удалить этот cookie, вам нужно установить дату истечения срока его действия: 

document.cookie = 'auth_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
// Replace 'auth_token' with whatever cookie name you're using.

Если это работает, это значит, что в вашем React вы просто делаете что-то вроде 

import React, { Component } from 'react'

class MenuContent extends Component {
  onLogout = () => {
    document.cookie = 'auth_token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'
  }

  render() {
    return (
      <div className="menu">
        <div onClick={this.onLogout} className="Logout">
          Click to Log Out
        </div>
        <p className="hint">
          Click outside the menu to close it, or swipe it closed on touch device
        </p>
      </div>
    )
  }
}

export default MenuContent
...