通过 Ruby Gem Devise 进行 JavaScript React 身份验证？

Question

我第一次在 Rails 应用程序中工作，我正在尝试将前端转换为 React。我正在做这个逐个视图，现在我正在处理菜单栏，它的链接基于用户是否登录。请参阅下面的原始 rails erb 代码：

<ul class="nav-right-links">
  <% if user_signed_in? %>
    <li><%= link_to 'Account', edit_user_registration_path %></li>
    <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
  <% else %>
    <li><%= link_to 'Sign in', new_user_session_path %></li>
    <li><%= link_to 'Sign up', new_user_registration_path %></li>
  <% end %>
  <li><a href="/connections/help">Help</a></li>
</ul>

我发现这个身份验证是由一个名为 Devise 的 rails Gem 完成的。我想通过设计保持身份验证，但我只需要弄清楚如何将一些逻辑放入 React。如果你很好奇，这里是我到目前为止的一些反应代码。现在我只是使用hrefs，但显然它没有响应用户是否登录：

  render () {
    return (
      <div style={styles.container}>
        <ul style={styles.leftNav}>
          {leftLinks.map(link => {
            return (
              <li style={styles.listElement}><a style={styles.link} href={link.path}> {link.name} </a> </li>
            );
          })}
        </ul>
      </div>
    );
  }

非常感谢任何帮助！

Answer 1

我们想要的是一个替换这个 ERB 部分的组件（我们称之为 LoginMenu）。

让我们通过弄清楚我们将如何摆脱特定的 ERB 代码来分解它，其中有以下构造：

1. <% if user_signed_in? %> ... <% else %> ... <% end %>
2. <%= link_to 'Account', edit_user_registration_path %>
3. <%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %>
4. <%= link_to 'Sign in', new_user_session_path %>
5. <%= link_to 'Sign up', new_user_registration_path %>

1、2 和 3 都需要一个 user_id（可能为 nil）。如果存在非零 user_id 则“用户已登录”，用户的 id 可用于构造编辑和销毁路径。其他两条路径 (4, 5) 是常数值。

所以您的组件需要的是作为道具发送的 user_id。然后你可以这样说

if (props["user_id"]) {
  ... build and render the edit and destroy links using the value of props["user_id"]
} else {
  ... build the signin, and signup links
}

你可以像这样制作小辅助函数：

edit_user_link: function {
  <a style=... href={"/user/"+props["user_id"]+/edit"} >
}

等等……

假设您使用的是 react-rails，那么您将拥有

<%= react_component "LoginMenu", user_id: @user ? @user.id : nil %>

在这一点上，大部分页面都不是“反应性”的，但根据我们的经验，登录是更难做出反应性的事情之一，所以现在就保持原样。

仅供参考...如果您刚刚开始，您可能需要考虑http://reactrb.org，它可以让您在 ruby​​ 中编写客户端代码，因此您不会尝试同时学习三种不同的语言（ruby、js , JSX)。

例如，您的 ruby​​ 组件看起来像这样（这实际上将在 Stack Overflow 中运行...）

<script type="text/ruby">
# the above script tag just allows us to run in SO
# In your app User would be your user model, we are just going to stub it here

class User # < ActiveRecord::Base - just stub user for now
  def id
   12
  end
end

# Here is your component.  Normally this would be in the file 
# app/views/components/login.rb by convention

class LoginMenu < React::Component::Base
  param :user, type: User
  def render 
    ul.nav_right_links do
      if params.user #react.rb refers to props as params
        li { a(href: "/user/#{params.user.id}/edit") { "Account" } }
        li { a(href: "/user/#{params.user.id}/delete") { "Delete" } }
      else
        li { a(href: "/user/new") { "Sign Up" } }
        li { a(href: "/user/login") { "Sign In" } }
      end
      li { a(href: "/connections/help") { "Help" } }
    end
  end
end

# the following just fires up our component in stack overflow...
# in your app you would do this in the controller:
# <%= react_component "LoginMenu", user: @user %>

Element['#container'].render { LoginMenu(user: User.new) }

</script>
<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rawgit.com/reactive-ruby/inline-reactive-ruby/master/inline-reactive-ruby.js"></script>

除了 http://reactrb.org 有一个很好的基础教程，您可以查看这些幻灯片，其中涵盖了 Rails 集成细节：http://slides.com/mitchvanduyn/deck-1