使用 Django Rest Framework、JWT 和 Vuejs 获取经过身份验证的用户信息

Question

我正在构建一个使用 DRF 作为后端并使用 Vuejs 作为前端的应用程序，我已经设法在 DRF 中使用 JWT 令牌创建身份验证系统，但我很难获得经过身份验证的用户信息。当我注册我存储的用户时，本地存储中的令牌为

localStorage.setItem('user-token', response.data.token)

但是当我尝试通过授权发送 http get 请求获取用户信息时 header 我收到 401 禁止错误

detail: "Authentication credentials were not provided."

这是我的代码：我用 axios

设置了这样的 header 授权

const token = localStorage.getItem('user-token') if (token) { axios.defaults.headers.common['Authorization'] =基本${token}}

vue中的get请求

 getUser(){
  axios.get(this.url +'/api/auth/user/')
  .then( (response) =>{
    console.log(response.data);
  });

我的views.py

class UserViewSet(APIView):
permission_classes      = [permissions.IsAuthenticated]
def get(self, request):
    serializer = UserSerializer(request.user)
    return Response(serializer.data)

我的序列化器

class UserSerializer(serializers.ModelSerializer):
class Meta:
    model = User
    fields = ('username', )

当我删除权限 class 时，我得到一个空的用户名字段作为响应，否则就是前面提到的 401 错误。我可以看到授权 header 已在浏览器中发送。请问有什么解决办法吗？

我的settings.py

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#Third party
'webpack_loader',
'rest_framework',
'corsheaders',
#Local apps
'users',

]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
#Cors
'corsheaders.middleware.CorsMiddleware',

]

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
    #'rest_framework.authentication.BasicAuthentication',
    'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
    'rest_framework.authentication.SessionAuthentication', #Oauth, JWT
),
'DEFAULT_PERMISSION_CLASSES': (
    'rest_framework.permissions.IsAuthenticatedOrReadOnly',
),
'DEFAULT_FILTER_BACKENDS': (
        'rest_framework.filters.SearchFilter',
        'rest_framework.filters.OrderingFilter',
),
'SEARCH_PARAM': 'q',
'ORDERING_PARAM': 'ordering',

}

JWT_AUTH = { 'JWT_ENCODE_HANDLER': 'rest_framework_jwt.utils.jwt_encode_handler',

'JWT_DECODE_HANDLER':
'rest_framework_jwt.utils.jwt_decode_handler',

'JWT_PAYLOAD_HANDLER':
'rest_framework_jwt.utils.jwt_payload_handler',

'JWT_PAYLOAD_GET_USER_ID_HANDLER':
'rest_framework_jwt.utils.jwt_get_user_id_from_payload_handler',

'JWT_RESPONSE_PAYLOAD_HANDLER':
#'rest_framework_jwt.utils.jwt_response_payload_handler'
'users.api.utils.jwt_response_payload_handler',

'JWT_ALLOW_REFRESH': True,
'JWT_REFRESH_EXPIRATION_DELTA': datetime.timedelta(days=7),

'JWT_AUTH_HEADER_PREFIX': 'JWT', # Authorization: JWT <token>
'JWT_AUTH_COOKIE': None,

}

#Cors
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Answer 1

DRF 的默认授权 header 是

axios.defaults.headers.common['Authorization'] =JWT ${token}

直到并且除非您没有进行更改，否则如果这仍然不起作用，请提供设置文件代码。

使用 Django Rest Framework、JWT 和 Vuejs 获取经过身份验证的用户信息

Getting authenticated user informations with Django Rest Framework, JWT and Vuejs

vue.js

django-rest-framework

jwt

axios

django-rest-framework-jwt