jquery - 当需要身份验证时，如何触发登录模式(弹出窗口)？

Question

我正在构建一个 Rails 4 应用程序并使用 Devise 进行身份验证。当用户尝试访问需要身份验证的 URL 时，Devise 会将用户重定向到登录页面以创建新 session 。

我决定通过配置 Devise 来处理 AJAX 登录请求并允许用户通过模式表单登录来使事情变得复杂。到目前为止它的效果很好。当用户点击导航栏中的“登录”按钮时，将显示模式，用户输入其凭据，处理 AJAX 请求，然后关闭模式。

但是，模式登录表单只能通过单击导航栏中的“登录”按钮来触发。每当用户尝试访问需要身份验证的 URL 时，用户仍会被重定向到 Devise 登录页面。我希望显示登录模式，而不是重定向到登录页面。 需要身份验证时如何触发登录模式(弹出窗口)？

以下概述了我当前如何触发登录模式。我正在使用leanModal作为我的模态...

$(function(){
    $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
});

这是通过单击导航栏中的“登录”按钮触发的...

<%= link_to "Login", "#modal", class: "sign-up", id: "modal_trigger" %>

这是模态视图...

<div class="user_login">
    <%= form_for resource, 
           as: resource_name,   
           url: session_path(resource_name),
           html: {id: "sign_in_user"},
           remote: true do |f| %>

      <%= f.label :email %>
      <%= f.text_field :email %>
      <br/>

      <%= f.label :password %>
      <%= f.password_field :password %>

      <% if devise_mapping.rememberable? %>
        <div class="checkbox">
              <%= f.check_box :remember_me %> <%= f.label "Remember me on this computer" %>
        </div>
      <% end %>

      <%= f.submit "Login", class: "btn btn_red" %>
    <% end %>
</div>

预先感谢您的智慧!如果我需要发布更多代码，请告诉我。

Answer 1

基于以下偏好之一:

1. 我希望用户点击目标页面然后显示模式
2. 我希望先显示登录模式，然后在注册后重定向用户

对于首选

1-首先在要向用户公开的 Controller 中跳过 before_filter 身份验证

skip_before_filter :authenticate_user!

2- 创建一个在用户未登录时触发模式的部分

- unless user_signed_in?
  :javascript
   $(function loginModalShow(){
     $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
   });

3-在 View 末尾渲染部分

= render partial: "partial_name"

对于偏好二

1. 添加应用程序助手来触发模式

   def link_to(name = nil, options = nil, html_options = nil, &block)  html_options, options, name = options, name, block if block_given?  options ||= {}  html_options = convert_options_to_data_attributes(options, html_options)  url = url_for(options)  html_options['href'] ||= url if url.present?  if html_options["require_login"] and not logged_in?    html_options.delete "data-toggle"    html_options.delete "data-remote"    html_options.delete "data-target"    html_options.delete "data-method"    html_options['href'] = '#'    html_options['onclick'] = "loginModalShow();"    html_options['class'] = "" if html_options['class'].nil?    html_options['class'] = html_options['class']  end  content_tag(:a, name || url, html_options, &block)end

2. 然后在您想要触发登录模型的每个链接上，添加以下内容

      link_to your_path, require_login: true 

3. 创建一个在用户未登录时触发模式的部分

   
       
   
        
   unless user_signed_in?:javascript $(function loginModalShow(){ $("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" }); });
       

4. 在您的应用程序布局中添加以下内容

     = render partial: "partial_name"