Django项目登录失败3次触发密码重置提示的显示异常排查

问题根因 #

当前实现中登录失败后Django会重定向回登录页，页面整体刷新，JS中定义的全局计数变量会被重新初始化，因此无法累计失败次数。

方案1：前端JS实现（简单快速） #

核心采用localStorage存储失败次数，页面刷新不会丢失，修改后的JS代码如下：

<script type="text/javascript">
// 页面加载时初始化登录失败次数，无存储记录时默认值为3
window.onload = function() {
    if(!localStorage.getItem('login_attempts')) {
        localStorage.setItem('login_attempts', 3);
    }
}

function checkAttempts() {
    // 先去除文本前后空格，避免格式问题导致匹配失败
    var failed_alert = document.querySelectorAll("a")[0].textContent.trim();
    var login_attempts = parseInt(localStorage.getItem('login_attempts'));

    if (failed_alert === "Invalid username or password") {
        login_attempts--;
        localStorage.setItem('login_attempts', login_attempts);
        console.log(login_attempts);
        alert('登录失败');

        if (login_attempts <= 0) {
            alert("你是否需要重置密码？");
            // 可在此处添加跳转重置密码页的逻辑：window.location.href = '/reset-password/'
            // 可根据需求选择重置计数或者禁用表单提交
            // localStorage.removeItem('login_attempts');
        }
    } else {
        // 登录成功后清除存储的失败次数，避免影响后续正常登录
        localStorage.removeItem('login_attempts');
        console.log(login_attempts);
        return false;
    }
}
</script>

方案2：Django后端实现（更安全，无法被用户绕过） #

通过Django自带的session存储用户登录失败次数，数据存在服务端，可靠性更高，无需修改前端逻辑，修改views.py代码如下：

def login(request):
    if request.user.is_authenticated:
        return redirect('/')
    else:
        # 初始化session中的失败次数，默认0次
        if 'login_failed_count' not in request.session:
            request.session['login_failed_count'] = 0

        if request.method == 'POST':
            username = request.POST['username']
            password = request.POST['password']

            user = auth.authenticate(username=username, password=password)

            if user is not None:
                # 登录成功，清空失败次数
                request.session['login_failed_count'] = 0
                auth.login(request, user)
                return HttpResponseRedirect(request.GET.get('next', LOGIN_REDIRECT_URL))
            else:
                # 登录失败，次数+1
                request.session['login_failed_count'] += 1
                # 超过3次的话，在提示中加入重置密码引导
                if request.session['login_failed_count'] >=3:
                    messages.info(request, 'Invalid username or password, you have tried too many times, do you want to reset your password?')
                else:
                    messages.info(request, 'Invalid username or password')
                return redirect('login.html')
        else:
            return render(request, 'login.html')

该方案后续调整失败次数阈值、锁定时长等逻辑都只需修改后端参数，更易维护。

内容的提问来源于stack exchange，提问作者martae