利用Django Groups在Vue应用中管理前端视图权限

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

User = get_user_model()

class GroupSerializer(serializers.Serializer):
    name = serializers.CharField()

class UserPermissionSerializer(serializers.ModelSerializer):
    groups = GroupSerializer(many=True, read_only=True)
    # 也可以进一步处理，生成一个前端友好的权限列表
    # 例如，一个计算属性，返回用户所有权限的code名称
    # user_permissions = serializers.SerializerMethodField()

    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'groups') # 可以根据需要添加其他字段

    # def get_user_permissions(self, obj):
    #     # 获取用户所有权限的codename
    #     return [perm.codename for perm in obj.get_all_permissions()]

# 当用户登录或获取用户信息时，使用此序列化器
# 例如在用户登录视图中:
# from rest_framework.response import Response
# from rest_framework.views import APIView
# from rest_framework.permissions import IsAuthenticated

# class CurrentUserView(APIView):
#     permission_classes = [IsAuthenticated]

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

{
    "id": 1,
    "username": "john_doe",
    "email": "john@example.com",
    "groups": [
        {"name": "Administrators"},
        {"name": "Project Managers"}
    ]
    // "user_permissions": ["add_project", "change_project", "view_report"]
}

// store/modules/auth.js
const state = {
  user: null,
  isAuthenticated: false,
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    state.isAuthenticated = !!user;
  },
  LOGOUT(state) {
    state.user = null;
    state.isAuthenticated = false;
  }
};

const getters = {
  // 检查用户是否属于某个组
  isInGroup: (state) => (groupName) => {
    if (!state.user || !state.user.groups) {
      return false;
    }
    return state.user.groups.some(group => group.name === groupName);
  },
  // 检查用户是否拥有某个具体权限 (如果后端发送了user_permissions)
  // can: (state) => (permissionCode) => {
  //   if (!state.user || !state.user.user_permissions) {
  //     return false;
  //   }
  //   return state.user.user_permissions.includes(permissionCode);
  // }
};

const actions = {
  // ... 登录和获取用户信息的action
  async fetchCurrentUser({ commit }) {
    try {
      const response = await api.get('/api/current-user/'); // 假设这是获取当前用户信息的API
      commit('SET_USER', response.data);
    } catch (error) {
      console.error('Failed to fetch user:', error);
      commit('LOGOUT');
    }
  }
};

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

<template>
  <div>
    <h1>欢迎来到仪表盘</h1>

    <!-- 只有管理员才能看到这个按钮 -->
    <button v-if="isInGroup('Administrators')">管理用户</button>

    <!-- 只有项目经理才能看到项目列表 -->
    <div v-if="isInGroup('Project Managers')">
      <h2>我的项目</h2>
      <ul>
        <li>项目 A</li>
        <li>项目 B</li>
      </ul>
    </div>

    <!-- 如果使用具体权限字符串 -->
    <!-- <button v-if="can('add_project')">新增项目</button> -->
  </div>
</template>

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

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters('auth', ['isInGroup']), // 映射Vuex的getter
    // ...mapGetters('auth', ['can']), // 如果使用了具体权限字符串
  },
};
</script>

// router/index.js
import store from './store'; // 假设你的Vuex store在这里

router.beforeEach((to, from, next) => {
  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin);

  if (requiresAdmin && !store.getters['auth/isInGroup']('Administrators')) {
    next('/unauthorized'); // 重定向到无权限页面
  } else {
    next();
  }
});

// 在路由定义中添加meta字段
// {
//   path: '/admin',
//   name: 'AdminPanel',
//   component: AdminPanel,
//   meta: { requiresAdmin: true }
// }