正文

学会Django与Vue实现单点登录，轻松搭建权限管理系统

/0 浏览量
1018

在当今的互联网时代，单点登录（SSO）已经成为提高用户体验和系统安全性的重要手段。Django和Vue作为两个流行的开源框架，分别适用于后端和前端开发。本文将详细介绍如何结合Django与Vue实现单点登录，并搭建一个权限管理系统。

一、单点登录（SSO）概述

单点登录（SSO）是一种用户认证机制，允许用户使用一个账户登录多个系统。当用户在支持SSO的系统中登录后，其他系统无需再次进行登录验证，从而提高用户体验。SSO通常涉及以下几个关键组件：

  1. 认证服务器（Identity Provider, IdP）：负责用户认证和授权。
  2. 资源服务器（Resource Server）：提供需要保护的资源，如网页、API等。
  3. 单点登录服务器（SSO Server）：负责处理认证请求和令牌交换。

二、Django与Vue搭建SSO系统

2.1 环境搭建

首先，确保你的开发环境已经安装了Python、Django和Node.js。以下是搭建Django后端和Vue前端的基本步骤：

Django后端：

pip install django
django-admin startproject sso_project
cd sso_project
pip install djangorestframework

Vue前端：

npm install -g @vue/cli
vue create sso_client
cd sso_client
npm install axios

2.2 Django后端实现

在Django项目中，我们需要创建一个认证服务器，用于处理用户登录和令牌生成。

  1. 创建认证应用：
python manage.py startapp authentication
  1. 配置认证应用：

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

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'authentication',
]
  1. 创建用户模型：

在authentication/models.py中创建用户模型：

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=50)
    password = models.CharField(max_length=50)
  1. 创建认证视图：

在authentication/views.py中创建认证视图：

from django.http import JsonResponse
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password

def login(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    user = User.objects.filter(username=username).first()
    if user and user.check_password(password):
        token = generate_token(username)
        return JsonResponse({'token': token})
    return JsonResponse({'error': 'Invalid username or password'}, status=401)

def generate_token(username):
    # 生成令牌逻辑
    pass
  1. 配置URL路由：

在authentication/urls.py中配置URL路由：

from django.urls import path
from .views import login

urlpatterns = [
    path('login/', login, name='login'),
]
  1. 配置Django REST framework：

在settings.py中配置Django REST framework：

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    ),
}

2.3 Vue前端实现

在Vue项目中，我们需要创建一个单点登录客户端，用于处理用户登录和令牌存储。

  1. 创建登录组件：
<template>
  <div>
    <h1>Login</h1>
    <input v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/login/', {
          username: this.username,
          password: this.password,
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>
  1. 配置Vue路由：

在src/router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';
import Dashboard from '@/components/Dashboard';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login,
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true,
      },
    },
  ],
});
</script>
  1. 创建Dashboard组件：
<template>
  <div>
    <h1>Dashboard</h1>
    <p>Welcome, {{ username }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  created() {
    const token = localStorage.getItem('token');
    if (!token) {
      this.$router.push('/');
    } else {
      this.username = localStorage.getItem('username');
    }
  },
};
</script>

2.4 权限管理

在Django项目中，我们可以使用Django的权限系统来管理用户权限。以下是一些基本步骤：

  1. 创建用户组：
from django.contrib.auth.models import Group

group, created = Group.objects.get_or_create(name='admin')
  1. 将用户添加到用户组：
user.groups.add(group)
  1. 创建权限：
from django.contrib.auth.models import Permission

permission, created = Permission.objects.get_or_create(name='Can add user')
  1. 将权限分配给用户组：
group.permissions.add(permission)
  1. 在Django视图中检查权限：
from django.contrib.auth.decorators import login_required, permission_required

@login_required
@permission_required('auth.add_user', raise_exception=True)
def add_user(request):
    # ...

三、总结

通过本文的介绍，你现在已经学会了如何使用Django和Vue实现单点登录，并搭建一个权限管理系统。在实际项目中，你可以根据需求进行扩展和优化。希望本文对你有所帮助！

-- 展开阅读全文 --