Vue + Django2.0.6 学习笔记 7.6 vue和jwt接口调试

红太狼 2022-01-21 08:07 286阅读 0赞

通过前端登录组件来获取后台的用户信息：

先将后端路由改成：

path('login/', obtain_jwt_token),

因为前端是请求这个路径：

//登录
    export const login = params => {
      return axios.post(`${local_host}/login/`, params)
    }

通过浏览器插件vue的vuex我们可以看到返回的token

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

但是默认的django登录是用户名 所以我们需要自定义登录认证

settings.py:
    AUTHENTICATION_BACKENDS = (
        'users.views.CustomBackend',
    )
    
    users/views/
    
    from django.contrib.auth.backends import ModelBackend
    from django.contrib.auth import get_user_model
    from django.db.models import Q
    
    User = get_user_model()
    
    
    class CustomBackend(ModelBackend):
        def authenticate(self, request, username=None, password=None, **kwargs):
            try:
                user = User.objects.get(Q(username = username) | Q(mobile = username))
                if user.check_password(password):
                    return user
            except Exception as e:
                return None

可以打断点然后重新登陆看有没有效果

关于JWT的两个常用设置：

import datetime
    JWT_AUTH = {
    # 设置 token的过期时间
        'JWT_EXPIRATION_DELTA': datetime.timedelta(days=7),
    # 设置 token认证的头的名称 默认JWT
        'JWT_AUTH_HEADER_PREFIX': 'JWT',
    }

其他设置可参考官方文档

[http://getblimp.github.io/django-rest-framework-jwt/][http_getblimp.github.io_django-rest-framework-jwt]

完结

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220121/30ac2401fc37412bba7bda745fe3063c.png
[http_getblimp.github.io_django-rest-framework-jwt]: http://getblimp.github.io/django-rest-framework-jwt/