【Django3.0功能开发】JavaScript篇：结合JWT Token使用JS用户登陆、登出功能

Django3.0中基于HTML+JavaScript进行用户登陆、登出的功能举例，这里将用户名和jwt_token保存到浏览器中，登陆成功则在本地浏览器读取username信息进行显示，后续结合用户名和jwt_token内容进行业务，登出则清空保存的username和jwt_token信息，如有不同需求自行更改。

JavaScrip用户登陆

//用户登陆
function UserLogin() {
    
    
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    //    var token = $('input[name=csrfmiddlewaretoken]').val();  //非csrf验证就使用
    var user = {
    
    
        username: username,
        password: password,
        //    csrfmiddlewaretoken: token 
    };
    // post 你制作的JWT的API接口
    $.post("http://127.0.0.1/UserTokenInfo/", {
    
    
            username: username,
            password: password
        },
        function (result) {
    
    
            var obj = eval('(' + result + ')');
            window.localStorage.clear('token') // 每次登陆清理token
            window.localStorage.setItem('username', obj.username) // 登陆成功重新设置username保存到浏览器本地
            window.localStorage.setItem('jwt_token', obj.token) // 登陆成功重新设置token保存到浏览器本地
            document.cookie = obj.username + '|' + obj.token;  // 登陆成功信息保存到cookie中
        });
}

PostMen图解

JavaScrip跳过CSRF

// 用于跳过CSRF认证，API登陆必备
$(document).ajaxSend(function (event, xhr, settings) {
    
    
    function getCookie(name) {
    
    
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
    
    
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
    
    
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
    
    
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function sameOrigin(url) {
    
    
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }

    function safeMethod(method) {
    
    
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
    
    
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

JavaScrip显示用户名

//显示登陆用户username
$(document).ready(function () {
    
    
    var user_name = localStorage.getItem('username')
    if (user_name) {
    
    
        $("#user_name").html("用户：" + user_name);
        document.getElementById("user_register").style.display = "none";
        document.getElementById("user_login").style.display = "none";
        return user_name
    } else {
    
    
        document.getElementById("user_name").style.display = "none";
        document.getElementById("user_logout").style.display = "none";
    }
});

JavaScrip用户登出

//用户登出
function UserLogout() {
    
    
    window.localStorage.clear('token') // 登出清理token
    window.localStorage.clear('username') // 登出清理token
}

HTML前端

代码部分，这里根据你的实际情况在a标签下添加onclick的方法 执行对应的JS内容即可。

<!-- 用户注册、登陆-->
<div class="col-md-3 col-sm-12 text-right">
    <ul class="nav-icons">
        {% if UserInfo %}
            <li>
                <a href="#"><i class="ion-person"></i>
                    <div>{
   
   { UserInfo.nick_name }}</div>
            </li>
            <li>
                <a href="{% url 'UserLogout' %}"><i class="ion-person"></i>
                    <div>登出</div>
                </a>
            </li>
        {% else %}
            <li>
                <a href="#"><i class="ion-person"></i>
                    <div>游客状态</div>
            </li>
            <li>
                <a href="{% url 'UserRegister' %}"><i class="ion-person-add"></i>
                    <div>注册</div>
                </a>
            </li>
            <li>
                <a href="{% url 'UserLogin' %}"><i class="ion-person"></i>
                    <div>登陆</div>
                </a>
            </li>
        {% endif %}
    </ul>
</div>

登陆界面

登陆成功