求助：基于Django Rest Framework与Angular 2实现登录注册及教程推荐

Hey there! I totally get how frustrating it can be to hunt down the right tutorials when you're new to combining Angular 2 and Django Rest Framework (DRF)—especially for core auth features like login and registration. Let me walk you through a practical, step-by-step approach you can build yourself, plus key tips to avoid common headaches.

Start by laying the groundwork on the Django side, since that's where your user data and auth logic live:

• Enable Token Authentication: DRF has built-in token auth, which is perfect for Angular. First, add rest_framework.authtoken to your INSTALLED_APPS in settings.py. Then update your DRF config:

  REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': [
          'rest_framework.authentication.TokenAuthentication',
      ]
  }
  

  Run python manage.py migrate to create the token table.

• Build Registration & Login Views:

  • For registration: Create a custom UserSerializer that handles password hashing (use make_password from django.contrib.auth.hashers), then use a CreateAPIView to expose a POST endpoint at /api/register/ that creates new users.
  • For login: Use DRF's ObtainAuthToken view (or customize it) to create a /api/login/ endpoint that returns an auth token when valid credentials are submitted.

• Wire Up URLs: Map your new views to URLs in urls.py so Angular can reach them.

Now switch over to Angular to create the user-facing part:

• Generate Auth Components: Use Angular CLI to quickly make login and register components:

  ng generate component auth/login
  ng generate component auth/register
  

• Create Reactive Forms: Use Angular's ReactiveFormsModule to build forms for registration (username, email, password, confirm password) and login (username/email, password). Add validation (like password match checks for registration) directly in the component code.

• Make an Auth Service: Create a service (e.g., AuthService) to handle API calls to your DRF endpoints:

  • A register() method that sends a POST request to /api/register/ with user data.
  • A login() method that sends credentials to /api/login/, then stores the returned token in localStorage.
  • Helper methods to check if a user is logged in (by checking for the token) and to log out (remove the token from storage).

• Configure Routing & Guards: Add routes for /auth/login and /auth/register in your app-routing.module.ts. Create an AuthGuard to protect routes that require a logged-in user—this guard will check for the token in localStorage before allowing access.

• CORS Issues: DRF blocks cross-origin requests by default, so install django-cors-headers and add your Angular app's URL (e.g., http://localhost:4200) to CORS_ALLOWED_ORIGINS in settings.py.
• Password Security: Never send passwords over HTTP—always use HTTPS. On the DRF side, ensure you're hashing passwords before saving users (your serializer should handle this).
• Error Handling: Add error handling in your Angular service to catch things like duplicate usernames or invalid credentials, then display user-friendly messages in your components.
• Token Usage: For every authenticated request from Angular to DRF, include the token in the request headers: Authorization: Token <your-token>

You don't need a single "perfect" tutorial here—building this step-by-step will help you understand how both frameworks interact. If you hit specific snags (like form validation bugs or token storage issues), search Stack Overflow for targeted solutions—there are tons of answers to common Angular+DRF auth problems.

内容的提问来源于stack exchange，提问作者Diogo Silva