【Django】いいね機能にログインユーザー制限をかけたいのにうまくいきません。

Question

前提・実現したいこと

現在django2を使用してwebアプリケーションを開発しております。
そのアプリには会員登録機能とログイン機能が備わっております。
そしてログインしたユーザーのみが詳細ページ内の「いいね」を押せる様に制限をかけたいです。

仕様としては
誰でも閲覧可能な詳細ページにアクセスし、
そこで現在ログインしているユーザーであれば通常通り「いいね」を押せる。
ログインしていないユーザーはログインページにリダイレクトされる。

発生している問題・エラーメッセージ

ログインしていないユーザーが「いいね」を押すと、無反応です。
「いいね」数もカウントされないし(これは問題無し)、リダイレクトもされない状態です。

該当のソースコード

#views.py
"""ライブラリ読み込み"""
from django.shortcuts import render


class DetailView(generic.DetailView):
    """詳細ページはクラスビューで表示"""
    model = User
    template_name = 'register/detail.html'


def like(request, pk):
    """いいね機能"""
    try:
        user = User.objects.get(pk=pk)
    except User.DoesNotExist:
        raise Http404
    user.like += 1 
    user.save() 
    return redirect('register:detail', pk=pk)


def api_like(request, pk):
    """いいね後ページをロードさせない"""
    if not request.user.is_authenticated:
        return render(request, 'register/login.html') #ログインページにリダイレクトさせる
    try:
        user = User.objects.get(pk=pk)
    except User.DoesNotExist:
        raise Http404
    user.like += 1 

    return JsonResponse({"like":user.like})

#urls.py

urlpatterns = [
    path('', views.TopView.as_view(), name='top'),
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),　#詳細ページのパス
    path("<int:pk>/like/", views.like, name="like"),
    path("api/like/<int:pk>/", views.api_like, name="api_like"),
]

#models.py

class User(AbstractBaseUser, PermissionsMixin):
    """カスタムユーザーモデル."""

    email = models.EmailField(_('email address'), unique=True)
    first_name = models.CharField(_('first name'), max_length=30, blank=True)
    last_name = models.CharField(_('last name'), max_length=150, blank=True)
    like = models.IntegerField(default=0)
    """省略."""

#settings.py
LOGIN_URL = 'register:login'
LOGIN_REDIRECT_URL = 'register:top'

#detail.html
"""詳細ページ内のいいねボタン部分"""
<div class="Likes">
<a onclick="api_like()" class="Likes-Icon"></a>
</div>
<script>
    function api_like() {
        var api_url = "{% url 'register:api_like' user.pk %}";
        var btn_txt = document.getElementById("like");
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                var received_data = JSON.parse(request.responseText);
                btn_txt.innerText = received_data.like;
                }
            }
        request.open("GET",api_url);
        request.send();
      }
</script>

試したこと

djangoのドキュメントを参考に試してみましたが同じ結果となりました。

from django.contrib.auth.decorators import login_required

@login_required
def api_like(request, pk):
    ...
や

from django.contrib.auth.decorators import login_required

@login_required(login_url='/accounts/login/')
def api_like(request, pk):
    ...

補足情報（FW/ツールのバージョンなど）

処理のログをよく観てみるとこちらが表示されております。このリンクのせいで正しいリダイレクト先が呼び出せないのでしょうか？

[23/Oct/2020 19:21:19] "GET /login/?next=/api/like/12/ HTTP/1.1" 200 6225

下記が参考にしたものです。
django公式ドキュメント
いいね機能はこちらのサイトにあるコードカスタマイズしました。
会員登録機能はこちらを参考にしました。

Answer 1

urls.pyにapi_like()へのURL定義がないので、javascriptから呼び出せてないのではないでしょうか？

javascriptのエラーも確認してみてください。

追記, 2020.10.27

jsのXMLHttpRequest.responseURLを参照がわからなかったため、

具体例をあげたほうがよかったですね。
XMLHttpRequestインスタンスから参照できます。

提示のソースですと、以下のようにresponseURLが参照できます。（locationへ代入）
locationのURLがログイン画面のURLであれば、リダイレクトが発生したと判断してもいいかと思います。

• https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/responseURL

<script>
    function api_like() {
        var api_url = "{% url 'register:api_like' user.pk %}";
        var btn_txt = document.getElementById("like");
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {

                // ----- add start -----
                let location = request.responseURL;
                console.log(location);
                // ----- add end   -----

                var received_data = JSON.parse(request.responseText);
                btn_txt.innerText = received_data.like;
                }
            }
        request.open("GET",api_url);
        request.send();
      }
</script>

Comments

[nre]

大変お忙しい中、ご返信してくださり誠にありがとうございます。
一応api_like()へのURU定義となるのはこちらだと考えているのですが、
path("api/like/<int:pk>/", views.api_like, name="api_like"),
記述もれでした。大変申し訳ございません。

[takyafumin]

XmlHttpRequestは、リダイレクトが発生したときに自動的にリダイレクト先のレスポンスを返すようです。

ですのでjavascriptのapi_like()内で、XMLHttpRequest.responseURLを参照しログインURLであれば画面遷移するよう実装するのはいかがでしょうか？

[nre]

大変お忙しい中、ご回答して頂き誠にありがとうございます。
早速、挑戦してみたのですが、
jsのXMLHttpRequest.responseURLを参照がわからなかったため、
仕様を変更することにいたしました。

ご回答して頂いたのにも関わらず大変申し訳ございません。