为AJAX web应用程序使用REST令牌身份验证是个好主意?

我使用Python/Django和出色的Django REST框架创建了一个REST web API。

我目前正在试验身份验证方法,想知道对AJAX网络应用程序使用“令牌身份验证”是否是一种好的做法。

我包含了一个示例HTML文件和一个非常基本的CRUD web应用程序,演示了我目前如何使用令牌身份验证。它工作得很好,但在源代码中只包含身份验证令牌真的可以吗(关于安全性等)?基本身份验证似乎是一个很好的选择,但我必须在源代码中同时包含用户名和密码,这对我来说似乎更糟?

脚注:我知道REST通过HTTPS协议更好地用于安全性,但很明显,我正在我的开发机器上运行这些代码。我计划在生产中使用HTTPS。

提前感谢您的任何提示!

致以诚挚的问候, 克里斯托夫

{% extends 'base.html' %}
{% block title %}Games{% endblock %}
{% block content %}<script type="text/javascript">/*<![CDATA[*/
function getBase() {
    return 'http://api.sandbox.dev:8080/';
}
function getData() {
    return {
        id: $('#id').val(),
        title: $('#title').val(),
    };
}
function getToken() {
    return 'b26ffd6ddb66428ce9164d606f694cd4184ce73e';
}
$(document).ready(function(){
    $('#create').click(function(e){
        $.ajax({
            url: getBase() + 'games/',
            type: 'POST',
            data: getData(),
            dataType: 'json',
            headers: {
                authorization: 'token ' + getToken(),
            },
            complete: function(xhr, textStatus) {
                console.log('textStatus = ' + textStatus);
            },
            success: function(data, textStatus, xhr) {
                console.log('textStatus = ' + textStatus);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
            },
        });
    });
    $('#update').click(function(e){
        if(getData().id) {
            $.ajax({
                url: getBase() + 'games/' + getData().id + '/',
                type: 'PUT',
                data: getData(),
                dataType: 'json',
                headers: {
                    authorization: 'token ' + getToken(),
                },
                complete: function(xhr, textStatus) {
                    console.log('textStatus = ' + textStatus);
                },
                success: function(data, textStatus, xhr) {
                    console.log('textStatus = ' + textStatus);
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
                },
            });
        }
    });
    $('#delete').click(function(e){
        if(getData().id) {
            $.ajax({
                url: getBase() + 'games/' + getData().id + '/',
                type: 'DELETE',
                data: {},
                dataType: 'json',
                headers: {
                    authorization: 'token ' + getToken(),
                },
                complete: function(xhr, textStatus) {
                    console.log('textStatus = ' + textStatus);
                },
                success: function(data, textStatus, xhr) {
                    console.log('textStatus = ' + textStatus);
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.log('textStatus = ' + textStatus + '\nerrorThrown = ' + errorThrown);
                },
            });
        }
    });
});
/*]]>*/</script><form action="" method="post" onsubmit="return false">
    <dl>
        <dt><label for="id">ID</label></dt>
        <dd><input type="text" id="id" name="id" size="20" maxlength="10" /></dd>
        <dt><label for="title">Title</label></dt>
        <dd><input type="text" id="title" name="title" size="20" maxlength="20" /></dd>
    </dl>
    <p><button type="button" id="create">Create</button></p>
    <p><button type="button" id="update">Update</button></p>
    <p><button type="button" id="delete">Delete </button></p>
</form>{% endblock %}