मुझे अपने कोणीय प्रोजेक्ट में लॉगिन घटक के साथ एक समस्या है क्योंकि यह लॉगिन पृष्ठ लोड नहीं करेगा बल्कि इसके बजाय यह दिखाएगा:HTTP ERROR 401

जब मैं पोस्टमैन का उपयोग करके लॉग इन करने का प्रयास करता हूं, तो यह पूरी तरह से काम करता है इसलिए मुझे समझ में नहीं आता कि इसका यह व्यवहार क्यों है क्योंकि मुझे कंसोल या ब्राउज़र में कोई त्रुटि नहीं मिलती हैडाकिया स्थिति। यह मेरा login.component.ts है:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LoginService } from '../services/login.service';
import { first } from 'rxjs/operators';
import {ToastrManager} from 'ng6-toastr-notifications';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
  constructor(private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private loginService: LoginService,
    public toast: ToastrManager, ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
    });
  }
get loginFormControl() {return this.loginForm.controls; }
onSubmit() {
  this.submitted = true;

  // stop here if form is invalid
  if (this.loginForm.invalid) {
  return;
  }
  this.loading = true;
  this.loginService.login(this.loginFormControl.email.value, this.loginFormControl.password.value)
      .pipe(first())
      .subscribe(
        () => {
          this.toast.successToastr('Login succesfully');
          this.router.navigate(['/']);
        },
        () => {
          this.loading = false;
          this.toast.errorToastr('Something went wrong');
          this.loginForm.reset();
          this.loginForm.setErrors({
            invalidLogin: true
          });
        });

 }
}

मेरा login.service.ts:

import { Injectable } from '@angular/core';
import {Register} from '../Models/register';
import { HttpClient, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class LoginService {
   httpOptions = { headers: new HttpHeaders(
    { 'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': 'Bearer',
    })
};
  userData = new BehaviorSubject<Register>(new Register());
ApiUrl = 'https://localhost:5001';
    constructor(private http: HttpClient, public router: Router) {
    }
    login(email, password) {
      return this.http.post<any>(this.ApiUrl + '/login/login', { email, password}, this.httpOptions
     )
      .pipe(map(response => {
        localStorage.setItem('authToken', response.token);
        this.setUserDetails();
        return response;
      }));
    }
    GetById(id) {
      return this.http.post(this.ApiUrl + '/register/' + id , this.httpOptions);
    }
    doLogout() {
      const removeToken = localStorage.removeItem('access_token');
      if (removeToken == null) {
        this.router.navigate(['/login']);
      }
    }

    // User profile
    setUserDetails() {
      if (localStorage.getItem('authToken')) {
        const userDetails = new Register();
        const decodeUserDetails = JSON.parse(window.atob(localStorage.getItem('authToken').split('.')[1]));
        userDetails.email = decodeUserDetails.sub;
        userDetails.name = decodeUserDetails.name;
        userDetails.isLoggedIn = true;
        userDetails.role = decodeUserDetails.role;
        this.userData.next(userDetails);
      }
    }

    handleError(error: HttpErrorResponse) {
      let msg = '';
      if (error.error instanceof ErrorEvent) {
        // client-side error
        msg = error.error.message;
      } else {
        // server-side error
        msg = `Error Code: ${error.status}\nMessage: ${error.message}`;
      }
      return throwError(msg);
    }
}
<div class="col-md-6 offset-md-3 mt-5">    
    <div *ngIf="loginForm.errors?.invalidLogin" class="alert alert-danger mt-3 mb-0">    
      Email or Password is incorrect.    
    </div>    
    <div class="card">  
      <div class="card-body">    
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">    
          <div class="form-group">    
            <label for="email">Email</label>    
            <input type="text" formControlName="email" class="form-control" autofocus    
              [ngClass]="{ 'is-invalid': submitted && loginFormControl.email.errors }" />    
            <div *ngIf="submitted && loginFormControl.email.errors" class="invalid-feedback">    
              <div *ngIf="loginFormControl.email.errors.required">Email is required</div>    
            </div>    
          </div>    
          <div class="form-group">    
            <label for="password">Password</label>    
            <input type="password" formControlName="password" class="form-control"   
              [ngClass]="{ 'is-invalid': submitted && loginFormControl.password.errors }" />    
            <div *ngIf="submitted && loginFormControl.password.errors" class="invalid-feedback">    
              <div *ngIf="loginFormControl.password.errors.required">Password is required</div>    
            </div>    
          </div>    
          <button [disabled]="loading" class="btn btn-primary">    
            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>    
            Login    
          </button>    
        </form>    
      </div>    
    </div>    
  </div>    

लॉग इनकंट्रोलर.सीएस:

using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Security.Claims;
using System.Text;
using AnotherAP.Helpers;
using AnotherAP.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.IdentityModel.Tokens;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace AnotherAP.Controllers
{
    [EnableCors("CorsPolicy")]
    [Authorize]
    [ApiController]
    [Produces("application/json")]
    [Route("[controller]")]
    public class LoginController : ControllerBase
    {
        private readonly IConfiguration _config;
        private readonly DataContext _context;
        public LoginController(IConfiguration config,DataContext context)
        {
            _context = context;
            _config = config;
        }
      

        [AllowAnonymous]
        [HttpPost]
        [Route("login")]
        public IActionResult Login([FromBody] Register model)
        {
            IActionResult response = Unauthorized();
            Register user = AuthenticateUser(model.Email,model.Password);
            if (user != null)
            {
                var tokenString = GenerateJWT(user);
                response = Ok(new
                {
                    token = tokenString,
                    userDetails = user,
                });
            }
            return response;
        }

       string GenerateJWT(Register user)
        {
            var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:SecretKey"]));
            var credentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256);

            var claims = new[]
            {
                new Claim(JwtRegisteredClaimNames.Sub, user.Email),
                new Claim("Name", user.Name.ToString()),
                new Claim("role",user.Role),
                new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
            };

            var token = new JwtSecurityToken(
                issuer: _config["Jwt:Issuer"],
                audience: _config["Jwt:Audience"],
                claims: claims,
                expires: DateTime.Now.AddMinutes(30),
                signingCredentials: credentials
            );
            return new JwtSecurityTokenHandler().WriteToken(token);
        }

      public  Register AuthenticateUser(string email,string password)
        {
            if (string.IsNullOrEmpty(email) || string.IsNullOrEmpty(password))
                return null;

            var user = _context.register.FirstOrDefault(x => x.Email == email && x.Password==password);
           
            // check if username exists
            if (user == null)
                return null;
            return user;

        }
       
    }
}

सूची घोषणा के बजाय डेटा संदर्भ का उपयोग करके AutheticateUser() के लिए नियंत्रक में कोड को संशोधित करने के बाद यह व्यवहार होने लगा। इससे पहले यह क्रेडेंशियल्स को नहीं पहचानता था लेकिन पेज ठीक से प्रदर्शित होता था, इसके बजाय यह पोस्टमैन के साथ काम नहीं करेगा। अब यह पोस्टमैन के साथ 200 ओके देता है, लेकिन पेज लोड नहीं होगा। क्या किसी को भी इसी तरह की समस्या का सामना करना पड़ा और इसका कारण पता चल सकता है? किसी भी मदद की सराहना की जाएगी!सादर!

अपडेट करें: यह वह त्रुटि है जो मुझे ब्राउज़र कंसोल से मिल रही है: ब्राउज़र कंसोल त्रुटि

0
Ed12M 16 मार्च 2020, 20:43

1 उत्तर

सबसे बढ़िया उत्तर

मैं कहूंगा कि आपके login.service में गलत मार्ग है:

  login(email, password) {
  return this.http.post<any>(this.ApiUrl + '/login/login', { email, password}, this.httpOptions
 )

क्या यह '/login/login' के बजाय '/login' नहीं है?

0
ToTaTaRi 16 मार्च 2020, 18:56