Django 后端权限管理与前端视图控制：基于 Group 的最佳实践

# myapp/serializers.py
from rest_framework import serializers
from django.contrib.auth import get_user_model

User = get_user_model()

class UserPermissionSerializer(serializers.ModelSerializer):
    # 方式一：发送用户所属的组名称列表
    groups = serializers.SerializerMethodField()
    # 方式二：发送用户实际拥有的所有权限字符串列表（更推荐）
    user_permissions = serializers.SerializerMethodField()

    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'is_staff', 'groups', 'user_permissions')

    def get_groups(self, obj):
        """获取用户所属的所有组的名称"""
        return [group.name for group in obj.groups.all()]

    def get_user_permissions(self, obj):
        """获取用户所有权限字符串（包括通过组获得的权限）"""
        # 使用 get_all_permissions 方法获取用户所有权限
        # 返回格式如 'app_label.permission_codename'
        return list(obj.get_all_permissions())

# myapp/views.py (API View 示例)
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
from .serializers import UserPermissionSerializer

class CurrentUserPermissionsView(APIView):
    permission_classes = [IsAuthenticated]

    def get(self, request):
        serializer = UserPermissionSerializer(request.user)
        return Response(serializer.data)

// store/modules/auth.js (Vuex 示例)
const state = {
  user: null,
  permissions: [],
  // ... 其他用户相关状态
};

const mutations = {
  SET_USER_DATA(state, userData) {
    state.user = userData;
    state.permissions = userData.user_permissions || []; // 假设后端返回 'user_permissions' 字段
  },
  // ...
};

const actions = {
  async fetchUserData({ commit }) {
    try {
      const response = await api.get('/api/current-user-permissions/'); // 调用后端 API
      commit('SET_USER_DATA', response.data);
    } catch (error) {
      console.error('Failed to fetch user data:', error);
    }
  },
  // ...
};

const getters = {
  hasPermission: (state) => (permissionName) => {
    return state.permissions.includes(permissionName);
  },
  // ...
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

// 在 Vue 组件中使用
<template>
  <div>
    <button v-if="hasPermission('myapp.add_product')">添加产品</button>
    <router-link v-if="hasPermission('myapp.view_reports')" to="/reports">查看报告</router-link>
    <p v-else>您没有查看报告的权限。</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('auth', ['hasPermission']),
  },
  mounted() {
    // 在应用启动或用户登录后调用 action 获取权限
    this.$store.dispatch('auth/fetchUserData');
  },
};
</script>