Форма авторизации в Angular. Форма авторизации в Angular. angular login auth

Форма авторизации в Angular.

Open in new window

Создание компонента

ng g component login

Роутинг.

{ path: 'login', component: LoginComponent },

Ссылка

<a class="nav-link" routerLink="/login">Login</a>

Форма.

<div class="mx-auto login_form">
  <form method="post">
    <h2 class="text-center">Log in</h2>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Username" required="required">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" placeholder="Password" required="required">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block">Log in</button>
    </div>
    <div class="clearfix">
        <label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>

    </div>
  </form>
</div>

Сервис

ng g service login/login

Подключение в главный модуль.

  providers: [ 
    DocumentService,
    LoginService  
  ],

Опишем сервис.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { API_URL } from '../global';


@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(private http: HttpClient) { }

  login(login: string, password: string) {
    var data = {'login': login, 'password': password};
    return this.http.post(API_URL+'api/login', data);
  }

}

Изменим форму, добавив переменные модели.

    <input type="text" class="form-control" [(ngModel)]="username"  name="username" required="required">
    ...
    <input type="password" class="form-control" name="password" [(ngModel)]="password"  required="required">

Для работы [(ngModel)] включим FormsModule в секцию imports главного модуля.

  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    NgbModule.forRoot()
  ],

Доработаем компонент.

import { LoginService } from './login.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
  password: string;
  username: string;
  constructor(private http_service: LoginService) { }

  ngOnInit() {
  }

  login() {
      this.http_service.login(this.username, this.password).subscribe((data: any) => {
         console.log(data);
      })
  }

}

Вызовем метод при клике на кнопке.

<button type="submit" (click)="login()" class="btn btn-primary btn-block">Log in</button>

login angular form

Джанго вью для API запроса

Может быть оформлен как ViewSet или обычным View (APIView)

class UpdateTimeView(APIView):

    def get(self, request, format=None):
        return Response({})


class UpdateTimeViewSet(ViewSet):

    def list(self, request, format=None):
        return Response({})

При этом использование в роутинге будет отличаться.

router.register(r'documents', DocumentViewSet)

или

path('api/login', APIView.as_view()),

Сделаем через APIView.

from rest_framework.views import APIView
from rest_framework.response import Response

class LoginView(APIView):
    def post(self, request):
        return Response({"status": 0})

Роутинг.

path('api/login', LoginView.as_view()),

django api login

Опишем автоизацию.

from django.contrib.auth.models import User
...
class LoginView(APIView):
    def post(self, request):
        payload = json.loads(request.body.decode('utf-8'))
        try:
            user = User.objects.get(username=payload['login'])
            if not user.check_password(payload['password']):
                 return Response({"status": 1, "message": "Error, wrong password!"})
            else:
                return Response({"status": 0, "message": "ok"})
        except Exception as e:
            return Response({"status": 1, "message": "Error, wrong login!", "exeption": str(e)})

django api login

Other topics