当前位置：首页 > VUE

django vue 实现权限管理

2026-01-21 16:31:53VUE

实现 Django 和 Vue 的权限管理

后端 (Django)

安装必要依赖 确保 Django 和 Django REST framework 已安装，推荐使用以下包：

pip install djangorestframework django-cors-headers djangorestframework-simplejwt

配置 Django 项目 在 settings.py 中添加以下配置：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'rest_framework_simplejwt',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
}

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
]

创建用户和权限模型 扩展 Django 的默认用户模型或使用内置模型：

from django.contrib.auth.models import AbstractUser, Group, Permission

class CustomUser(AbstractUser):
    pass

设置权限装饰器和类 在视图或视图集中使用权限控制：

from rest_framework.decorators import permission_classes
from rest_framework.permissions import IsAdminUser

@permission_classes([IsAdminUser])
def admin_only_view(request):
    ...

前端 (Vue)

安装必要依赖 使用 Vue CLI 创建项目并安装必要依赖：

npm install axios vue-router vuex

配置路由和权限控制 在 router/index.js 中设置路由守卫：

import store from '../store'

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const userRole = store.getters.userRole

  if (requiresAuth && !userRole) {
    next('/login')
  } else if (requiresAuth && to.meta.roles && !to.meta.roles.includes(userRole)) {
    next('/403')
  } else {
    next()
  }
})

实现权限指令 创建自定义指令检查元素级权限：

django vue 实现权限管理

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const userRoles = vnode.context.$store.getters.userRoles
    if (!userRoles.includes(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

使用示例

<button v-permission="'admin'">管理员按钮</button>

前后端交互

登录和获取令牌 在 Vue 中实现登录逻辑：

axios.post('/api/token/', {
  username: 'user',
  password: 'pass'
}).then(response => {
  localStorage.setItem('access_token', response.data.access)
  localStorage.setItem('refresh_token', response.data.refresh)
})

请求拦截器 为所有请求添加 JWT 令牌：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

权限数据结构示例

后端权限结构

django vue 实现权限管理

{
    "model": "auth.permission",
    "fields": {
        "name": "Can add user",
        "content_type": 1,
        "codename": "add_user"
    }
}

前端权限映射

const permissionMap = {
  'add_user': '创建用户',
  'change_user': '修改用户',
  'delete_user': '删除用户'
}

动态菜单实现

根据权限过滤菜单

computed: {
  filteredMenu() {
    return this.allMenuItems.filter(item => {
      return !item.permission || this.$store.getters.hasPermission(item.permission)
    })
  }
}

菜单项配置示例

{
  path: '/admin',
  name: 'Admin',
  meta: {
    permission: 'admin_access'
  }
}

错误处理

403 错误页面 创建专用组件处理权限不足情况：

<template>
  <div class="error-page">
    <h1>403 Forbidden</h1>
    <p>您没有权限访问此页面</p>
  </div>
</template>

拦截 403 响应

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 403) {
      router.push('/403')
    }
    return Promise.reject(error)
  }
)