「Django 功能开发」使用 JavaScript 实现 JWT Token 用户登陆、登出功能

古城微笑少年丶 2023-01-08 02:19 182阅读 0赞

全部 **Django Web** 开发文章索引目录传送门：

[【Django Web 开发】全部文章目录索引][Django Web]

### 文章目录 ###

*  内容介绍
 *  JavaScrip用户登陆
 *  JavaScrip跳过CSRF
 *  JavaScrip显示用户名
 *  JavaScrip用户登出
 *  HTML前端展示

# 内容介绍 #

本文介绍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图解  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70]

# 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>

登陆界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 1]  
登陆成功  
![在这里插入图片描述][20210118161819897.png]

[Django Web]: https://blog.csdn.net/qq_20288327/article/details/113180093
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70]: /images/20221119/2cae4cecc1df49d896188a2bb050a6c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210118161348557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIwMjg4MzI3,size_16,color_FFFFFF,t_70
[20210118161819897.png]: https://img-blog.csdnimg.cn/20210118161819897.png