带Rails的Ajax请求5应用程序获取错误401（未经授权）

I have a rails 5 app where I'm simply trying to implement a like button feature. In my case, I'm doing upvotes. When the signed in user clicks the button it should increment by 1. I'm using devise for users and admins.

我有一个rails 5应用程序,我只是想尝试实现类似的按钮功能。在我的情况下,我正在做赞成票。当登录用户单击该按钮时,它应该增加1.我正在为用户和管理员使用设计。

My show.html.erb

<% if member_signed_in? %>
 <div class"movie-votes">
   <medium id="votes"><%= @movie.votes %> members like this film</medium>
   <button id="upvote" type="submit">I Like this Film</button>
 </div>

My Ajax request

我的Ajax请求

"use strict";
console.log("loaded");
$(document).ready(function(){

 var member = $("member");
 var password = $("password");
$("#upvote").click(function() {
 console.log("clicked");
 var id = $(this).data("id");

$.ajax({
beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(member + ":" + password)); },
   url: "/movies/votes",
  type: "POST",
  data: {
    member: "test@example.com",
    password: "password",
    id: id,
 votes: true
  },
  success: function() {
    var vote_counter = $("#votes");
    // console.log(vote_counter);
    var current_vote = parseInt($("#votes").html());
    vote_counter.html(current_vote + 1);
    alert(vote_counter);
  }
  })
 })
})

MoviesController

before_action :set_movies, only: [:show, :edit, :destroy, :update, :votes]

def votes
 @movie.update(votes: @movie.votes + 1)
end

private 

def set_movies
  @movie = Movie.find(params[:id])
end

The error I'm getting when I open up the console on localhost.

我在localhost上打开控制台时遇到的错误。

loaded
clicked
jquery.self-660adc5….js?body=1:10246 POST http://localhost:3000/movies/votes 401 (Unauthorized)

This happens after I click the "I like this film" button. Sidenote, I disabled turbolinks for now because that has been the issue in the past. If needed, here's my GitHub

单击“我喜欢这部电影”按钮后会发生这种情况。旁注,我暂时禁用了turbolinks,因为过去一直是这个问题。如果需要,这是我的GitHub

1 个解决方案

#1

-1

Clearly the issue is due to the Authentication. apart from Authentication, you still have couple of issues in your code such as

显然,问题是由身份验证引起的。除了身份验证之外,您的代码中仍然存在一些问题,例如

you are not passing the id of the movie to votes action.

你没有把电影的id传递给投票动作。
Your controller assumes that the params[:id] is there and hence tries to find the movie but it couldn't get it.

你的控制器假设params [:id]在那里,因此试图找到电影,但它无法得到它。

In your html code, add a data-attribute in button tag:

在您的html代码中,在按钮标记中添加数据属性:

<% if member_signed_in? %>
 <div class"movie-votes">
   <medium id="votes"><%= @movie.votes %> members like this film</medium>
   <button data-movie="<%= @movie.id %>" id="upvote">I Like this Film</button>
 </div>

In your Ajax code:

在您的Ajax代码中:

  $(document).ready(function(){

     var member = $("member");
     var password = $("password"); // <-- this is the actual password you are passing here?
    $("#upvote").click(function() {
     var id = $(this).attr("data-movie");

    $.ajax({
    beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(member + ":" + password)); },
       url: "/movies/votes",
      type: "POST",
      data: {
        member: "test@example.com",
        password: "password",
        id: id,
        votes: true
      },
      success: function() {
        var vote_counter = $("#votes");
        // console.log(vote_counter);
        var current_vote = parseInt($("#votes").html());
        vote_counter.html(current_vote + 1);
        alert(vote_counter);
      }
    });
  });
});

PS: I am not sure if its a right way of building a voting feature. I would suggest using a gem like act_as_votable which will be much more neat.

PS:我不确定它是否是构建投票功能的正确方法。我建议使用像act_as_votable这样的宝石,它会更加整洁。

#1

-1