顺便说一句，我是一名学生，如何在汉堡菜单中的 React on Rails 中添加注销

Posted 2023-02-15

【中文标题】顺便说一句，我是一名学生，如何在汉堡菜单中的 React on Rails 中添加注销

【英文标题】：How do I add a logout in React on Rails in a Hamburger menu, I'm a student, by the way

【发布时间】：2019-06-19 21:27:27

【问题描述】：

我正在使用 React on Rails，目前正在使用 ERB 组件注销。我正在为应用程序创建一个汉堡菜单并将注销放入其中。目前它只是在 Rails 中使用<%= link_to "Logout", destroy_user_session_path, method: :delete %> 坐在开幕式上。我想把它放在 React 组件中。请帮忙。我对使用 React on 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

【参考方案1】：

我使用此代码注销了工作。感谢所有回复的人。

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

附：我应该在前面提到这一点。登录是通过 API 并使用设计。

【参考方案2】：

您实际上可以通过客户端注销。 所有 rails 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

【讨论】：

感谢您的回复。我在控制台中使用了 document.cookie，但在终端中使用“rails s”时什么也没有出现。我使用“设计”是否重要？

确保您已登录。并在浏览器控制台中键入 document.cookie。