Django 實現登陸後跳轉

說明

實現網頁登陸後跳轉應該分爲兩類：即登陸成功後跳轉和登陸失敗再次登陸成功後跳轉。參考網上內容，基本都只實現了第一類。而沒有實現第二類。

實現

爲了能讓登陸失敗後再次登陸成功後還能實現跳轉。我這裏採用了笨辦法， 即：不管登陸成功與否，都將跳轉連接在先後端進行傳遞 ,這樣跳轉連接就不會在登陸失敗後消失。很少說，上代碼

後端 views.py

from django.shortcuts import render, redirect

def login(request):
    # 當前端點擊登陸按鈕時，提交數據到後端，進入該POST方法
    if request.method == "POST":
        # 獲取用戶名和密碼
        username = request.POST.get("username")
        passwd = request.POST.get("password")
        # 在前端傳回時也將跳轉連接傳回來
        next_url = request.POST.get("next_url")

        # 對用戶進行驗證，假設正確的用戶名密碼爲"aaa", "123"
        if username == 'aaa' and passwd == '123':
            # 判斷用戶一開始是否是從login頁面進入的
            # 若是跳轉連接不爲空而且跳轉頁面不是登出頁面，則登陸成功後跳轉，不然直接進入主頁
            if next_url and next_url != "/logout/":
                response = redirect(next_url)
            else:
                response = redirect("/index/")
            return response
        # 若用戶名或密碼失敗,則將提示語與跳轉連接繼續傳遞到前端
        else:
            error_msg = "用戶名或密碼不正確，請從新嘗試"
            return render(request, "app/login.html", {
                'login_error_msg': error_msg,
                'next_url': next_url,
            })
    # 若沒有進入post方法，則說明是用戶剛進入到登陸頁面。用戶訪問連接形以下面這樣：
    # http://host:port/login/?next=/next_url/
    # 拿到跳轉連接
    next_url = request.GET.get("next", '')

    # 直接將跳轉連接也傳遞到後端
    return render(request, "autotest/login.html", {
        'next_url': next_url,
    })

前端頁面 login.html

<form action="{% url 'login' %}" method="post">
                 <h1>請使用xxx登陸</h1>
                 <div>
                   <input id="user" type="text" class="form-control" name="username" placeholder="帳戶" required="" />
                 </div>
                 <div>
                   <input id="pwd" type="password" class="form-control" name="password" placeholder="密碼" required="" />
                 </div>
       // 注意這裏多了一個input。它用來保存跳轉連接，以便每次點擊登陸按鈕時將跳轉連接傳遞迴後端
       // 經過display：none屬性將該input元素隱藏起來
                   <div style="display: none;">
                       <input id="next" type="text" name="next_url" value="{{ next_url }}" />
                   </div>
       // 判斷是否有錯誤提示，如有則顯示
                   {% if login_error_msg %}
                       <div id="error-msg">
                           <span style="color: rgba(255,53,49,0.8); font-family: cursive;">{{ login_error_msg }}</span>
                       </div>
                   {% endif %}
                 <div>
                     <button type="submit" class="btn btn-default" style="float: initial; margin-right: 60px">登陸</button>
                 </div>
   </form>

總結

其實這種實現方式就是讓跳轉連接在先後端交互中不損失掉。固然也能夠在前端不用form元素，直接用ajax的post形式，而後讓跳轉在前端的ajax邏輯中執行。