如何通过token识别用户？基于Django+Vue+dj-rest-auth的博客权限控制问题

1 后端Django侧配置 #

dj-rest-auth默认提供/dj-rest-auth/user/ GET接口，请求头携带合法Token即可返回当前登录用户的全量/自定义字段信息，结合自定义权限类即可实现后端层面的博文操作权限校验：

• 基础依赖配置：确保settings.py中已注册对应应用、指定Token认证规则

INSTALLED_APPS = [
    # 其他应用
    'rest_framework',
    'rest_framework.authtoken',
    'dj_rest_auth',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
    # 全局默认需要登录才能访问接口，可根据需求调整
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ]
}

• 自定义用户返回字段（可选）：如果只需要返回用户ID、用户名等必要字段，可自定义序列化器并在配置中指定

# yourapp/serializers.py
from dj_rest_auth.serializers import UserDetailsSerializer
class CustomUserSerializer(UserDetailsSerializer):
    class Meta(UserDetailsSerializer.Meta):
        fields = ('id', 'username', 'email')

# settings.py 追加配置
REST_AUTH_SERIALIZERS = {
    'USER_DETAILS_SERIALIZER': 'yourapp.serializers.CustomUserSerializer',
}

• 博文模型关联作者、自定义权限类

# yourapp/models.py
from django.db import models
from django.contrib.auth.models import User
class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    # 关联用户表作为作者
    author = models.ForeignKey(User, on_delete=models.CASCADE)

# yourapp/permissions.py
from rest_framework import permissions
class IsAuthorOrReadOnly(permissions.BasePermission):
    def has_object_permission(self, request, view, obj):
        # 读请求对所有用户开放
        if request.method in permissions.SAFE_METHODS:
            return True
        # 写请求仅允许博文作者操作
        return obj.author == request.user

• 博文视图绑定权限类

# yourapp/views.py
from rest_framework import viewsets
from .models import Post
from .serializers import PostSerializer
from .permissions import IsAuthorOrReadOnly
class PostViewSet(viewsets.ModelViewSet):
    queryset = Post.objects.all()
    serializer_class = PostSerializer
    permission_classes = [permissions.IsAuthenticated, IsAuthorOrReadOnly]

2 前端Vue侧处理 #

• 封装axios请求拦截器，统一携带Token：注意dj-rest-auth的Token格式为Token （Token后有1个空格）加实际Token值，空格不能省略

// 全局axios配置文件
import axios from 'axios'
import store from '@/store'
const service = axios.create({
  baseURL: '你的后端接口根地址',
  timeout: 5000
})
service.interceptors.request.use(
  config => {
    if (store.state.token) {
      config.headers['Authorization'] = `Token ${store.state.token}`
    }
    return config
  },
  error => Promise.reject(error)
)

• 登录后拉取用户信息存入vuex

// 登录逻辑示例
login(params).then(res => {
  const token = res.key
  // 同时存入vuex和localStorage，避免刷新丢失
  store.commit('SET_TOKEN', token)
  localStorage.setItem('blog_token', token)
  // 拉取当前登录用户信息存入vuex
  getUserInfo().then(userRes => {
    store.commit('SET_USER_INFO', userRes.data)
  })
})

• 刷新页面恢复用户状态：在App.vue的created钩子中判断，如果本地存储有Token，主动拉取用户信息补全vuex数据，避免刷新后权限判断失效。

3 前端界面权限控制 #

博文详情接口会返回关联的作者ID/用户名，和vuex中存储的当前登录用户ID做对比，一致则展示编辑按钮，否则隐藏：

<template>
  <div class="post-detail">
    <h1>{{ post.title }}</h1>
    <div class="content">{{ post.content }}</div>
    <el-button v-if="currentUserId === post.author.id" @click="handleEdit">编辑博文</el-button>
  </div>
</template>
<script>
export default {
  computed: {
    // 从vuex取当前登录用户ID
    currentUserId() {
      return this.$store.state.userInfo.id
    }
  },
  data() {
    return {
      post: {}
    }
  },
  created() {
    // 调用接口拉取博文详情
    getPostDetail(this.$route.params.postId).then(res => {
      this.post = res.data
    })
  }
}
</script>

注意：前端的按钮隐藏仅做交互优化，核心权限校验必须依赖后端的权限类实现，避免用户手动调用接口篡改非本人的博文数据。

内容的提问来源于stack exchange，提问作者C LALHMANGAIHA