#angular #typescript #api #jwt
#angular #typescript #API #jwt
Вопрос:
Обновить:
Я пытаюсь отправить POST-запрос в веб-API, используя http и jwt. Я следовал этому руководству, но я всегда получаю ошибку 400 из запроса.
https://bezkoder.com/angular-10-jwt-auth/
Используя Postman, я получаю статус 201, и я думаю, что проблема в том, что в моем проекте angular он не получает «токен» из API, даже с помощью interceptor..
Изображение входа в систему Postman
Ошибка при входе в систему:
Изображение ошибки входа в систему
Как я могу получить этот токен в свое приложение?
login.page.ts
async newLogin(email: string, password: string) {
try {
return this.authService.loginService(email, password).subscribe(async (res) => {
console.log(res);
if (res['token']) {
localStorage.setItem('token', res['token']);
console.log(res);
}
},
(err) => {
console.log(err);
}
)
}
catch (err) {
console.log(err.response);
console.log(email, password);
const loading = await this.loadingCtrl.create({
keyboardClose: true,
message: "Checking credentials ...",
duration: 3500
});
(await loading).present();
this.isLoading = true;
setTimeout(async () => {
(await loading).dismiss();
this.isLoading = false;
this.clicked = false;
}, 2500);
setTimeout(async () => {
const error2 = await this.alertCtrl.create({
header: 'Warning!',
message: 'Login failed.' err.message,
buttons: ['OK']
});
await error2.present();
}, 3000);
}
}
auth-service.ts
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
loginService(email: string, password: string): Observable<any> {
return this.http.post(`${this._loginAPI}`, { email, password }, httpOptions)
}
auth-interceptor.ts
intercept(req: HttpRequest<any>, next: HttpHandler) {
console.log("Interception In Progress"); //SECTION 1
const token: string = localStorage.getItem('token');
req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' token) });
req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
return next.handle(req)
.pipe(
catchError((error: HttpErrorResponse) => {
//401 UNAUTHORIZED - SECTION 2
if (error amp;amp; error.status === 401) {
console.log("ERROR 401 UNAUTHORIZED")
}
const err = error.error.message || error.statusText;
return throwError(error);
})
);
}
Комментарии:
1. Зачем использовать axios, когда у Angular есть http-клиент?
2. Я пробовал оба решения, но не сработало.. Та же ошибка, но без подсказки
3. И что вы видите в сети браузера при отправке запроса? Какая разница с Postman?
4. Может быть, я думаю, я знаю, в чем проблема.
Hint:
внимательно посмотрите на регистрационную информацию на изображении, которое вы отправили.5. Разница, я думаю, в токене, но когда я подключаюсь от postman, у меня есть файлы cookie или токены, просто он выдает mes 201 и мой 400.