vue3+django+drf 传递token、请求头封装、通过token获取当前登录user

1、后端用 DRF 内置的 Token 认证：

修改settings配置文件

# settings.py
INSTALLED_APPS = [
    # ...
    'rest_framework.authtoken',
]
REST_FRAMEWORK = {
   
   
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',  
    ]
}

前端请求登录，回传token给前端

class UserView(APIView):
    serializer_class = UserSerializer
    
    def post(self, request):
        username = request.data.get('username')
        password = request.data.get('password')
        
        user = authenticate(request, username=username, password=password)
        if user is None:
            return api_response(code=401, message="账号或密码错误！")
        else:
            # 登录成功后，生成或获取用户的 Token
            token, created = Token.objects.get_or_create(user=user)  # 关键：获取 Token
            # 返回用户信息 + Token
            serializer = self.serializer_class(user)
            return api_response(
                code=200,
                message="登录成功！",
                data={
   
   
                    "user": serializer.data,
                    "token": token.key  # 返回 Token 字符串
                }

2、前端：登录后保存 Token，请求时携带

设置请求拦截器

import axios, {
   
    AxiosInstance, AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';

const service: AxiosInstance = axios.create({
   
   
    timeout: 5000
});

service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
   
   
        const token = localStorage.getItem('token');
        if (token) {
   
   
            config.headers['Authorization'] = `Token ${
     
     token}`;  // 重点 配置请求头 格式："Token 你的token字符串"
        }
        return config;
    },
    (error: AxiosError) => {
   
   
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    (response: AxiosResponse) => {
   
   
        if (response.status === 200) {
   
   
            return response;
        } else {
   
   
            Promise.reject();