DjangoプロジェクトでのDjango REST framework JWTの使用

Djangoプロジェクトでは、ユーザーの認証が完了した後(ユーザー名とパスワードの検証)、ユーザーにJWTを発行する必要があり、ユーザーのアイデンティティ情報を使用する必要がある場合は、ユーザーのJWTを確認する必要があります.JWTの発行と検証については、Django REST framework JWT拡張子を使用して完了できます.
1.インストール構成
インストール

pip install djangorestframework-jwt

設定(settings.pyファイル)

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}


JWT_AUTH = {
    'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1),
}
# JWT_EXPIRATION_DELTA   token    

使用
Django REST framework JWT拡張の説明ドキュメントでは、JWTを手動で発行する方法が提供されています.

from rest_framework_jwt.settings import api_settings

jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER

payload = jwt_payload_handler(user)   #           
token = jwt_encode_handler(payload)

登録に成功したら、フロントエンドにtokenを返す必要があります.登録ビューにtokenを作成する必要があります.
次の例では、CreateUserSerializerはユーザ登録時にバックエンドで定義されたシーケンサであり、CreateUserSerializerシーケンサを変更し、createメソッドで手動でtokenを作成する方法を追加します.

from rest_framework_jwt.settings import api_settings

class CreateUserSerializer(serializers.ModelSerializer):
    """
            
    """
    ...
    token = serializers.CharField(label='    token', read_only=True)  #   token  

    class Meta：
        ...
        fields = ('id', 'username', 'password', 'password2', 'sms_code', 'mobile', 'allow', 'token')  #   token
        ...

    def create(self, validated_data):
        """
            
        """
        #                
        del validated_data['password2']
        del validated_data['sms_code']
        del validated_data['allow']
        user = super().create(validated_data)

        #   django         
        user.set_password(validated_data['password'])
        user.save()

        #            token
        jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
        jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
        payload = jwt_payload_handler(user)
        token = jwt_encode_handler(payload)
        user.token = token

        return user

フロントエンド保存token
JWTをクッキーに保存したり、ブラウザのローカルストレージに保存したりできます.ここではブラウザのローカルストレージに保存します.ブラウザのローカルストレージにはsessionStorageとlocalStorageの2種類があります.

sessionStorageブラウザが閉じると無効になります

localStorage長期有効

使用方法

sessionStorage.    =       //     
sessionStorage.     //     
sessionStorage.clear()  //     sessionStorage     

localStorage.    =       //     
localStorage.     //     
localStorage.clear()  //     localStorage     

例えば、ユーザ登録jsファイルを例にとる、フロントエンドjs/register.jsファイルに保存tokenを追加

var vm = new Vue({
    ...
    methods: {
        ...
        on_submit: function(){
            axios.post(...)
                .then(response => {
                    //          
                    sessionStorage.clear();
                    localStorage.clear();
                    localStorage.token = response.data.token;
                    localStorage.username = response.data.username;
                    localStorage.user_id = response.data.id;
                    location.href = '/index.html';
                })
                .catch(...)
        }
    }
})