Laravel 护照和 Angular 让我在 api/login 路线上未经授权但在邮递员身上工作正常?
Laravel Passport and Angular giving me unauthorized on api/login route but works fine on postman?
我遇到了这个问题,一直在尝试解决它并在互联网上搜索解决方案,但我没有找到任何帮助我的东西,
我有这个应用程序,在后端有 Laravel 和 Passport,在客户端有 Angular,
我正在尝试通过 http://localhost:8000/api/login 路由对用户进行身份验证
它在 postman 上工作正常并给我令牌,但在 Angular 上给我未经授权且无法获得令牌,
我在 laravel api 上尝试了一个获取请求,它正在获取我的数据并显示在 Angular 中,所以获取请求对我来说工作正常问题是 post 请求虽然我已经多次检查登录凭据并且是正确的
usercontroller.php 其中包含登录方法
class UserController extends Controller
{
public function __construct()
{
$this->middleware('auth:api')->except(['login' , 'register' , 'get_articles']);
}
public function register(Request $request)
{
$validator = Validator::make($request->all() , [
'name' => 'required|min:3|max:100',
'email' => 'required|email|unique:users,email',
'password' => 'required|min:6|max:100',
'c_password' => 'required|same:password'
]);
if($validator->fails())
{
return response()->json(['errors' => $validator->errors()] , 400);
}
$user = new User;
$user->email = $request->input('email');
$user->name = $request->input('name');
$user->password = Hash::make($request->input('password'));
$user->save();
return response()->json(['message' => 'created user successfully'] , 201);
}
public function login(Request $request)
{
if(Auth::attempt(['email' => request('email') , 'password' => request('password')]))
{
$user = Auth::user();
$success['token'] = $user->createToken('myapp')->accessToken;
return response()->json(['success' => $success] , 200);
}
return response()->json(['error' => 'unauthorized'] , 401);
}
Cors.php
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin' , '*')
->header('Access-Control-Allow-Methods' , 'GET,POST,PUT,DELETE,OPTIONS')
->header('Access-Control-Allow-Headers' , 'Origin , Content-Type, Accept, Authorization, X-Request-With')
->header('Access-Control-Allow-Credentials' , 'true');
}
}
这里是login.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Loginform } from '../loginform';
import { LoginService } from '../login.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private http:HttpClient , private LoginService: LoginService) { }
public submitted = false;
public errorMsg;
public email = "";
public pass = "";
public Loginform = new Loginform(this.email , this.pass);
ngOnInit() {
}
onSubmit() {
this.LoginService.login(this.Loginform).subscribe((data) => {console.log(data)} ,
(error) => {//this.errorMsg = error.statusText
console.log(error)});
this.submitted = true;
}
}
和login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Loginform } from './loginform';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor(private http: HttpClient) { }
public url: string = "http://localhost:8000/api/login";
login(loginform : Loginform) {
return this.http.post(this.url , loginform).pipe(catchError(this.handleError))
}
handleError(error: HttpErrorResponse) {
return throwError(error);
}
}
这里是 postman 具有相同凭据的快照
postman snapshot
以及浏览器错误图片
browser
可能会发生这种情况,因为您正在执行两个具有不同 Content-Type 的请求:对于 Postman,您使用的是带有键值主体的 Form-Data,而在 Angular6 服务中,您正尝试将数据发送为JSON.
两种不同的解决方案:
- 从 Laravel 控制器序列化 JSON 对象;
- 尝试在 Angular6 中使用
'Content-Type': 'multipart/form-data'
发送您的数据。
我遇到了这个问题,一直在尝试解决它并在互联网上搜索解决方案,但我没有找到任何帮助我的东西, 我有这个应用程序,在后端有 Laravel 和 Passport,在客户端有 Angular, 我正在尝试通过 http://localhost:8000/api/login 路由对用户进行身份验证 它在 postman 上工作正常并给我令牌,但在 Angular 上给我未经授权且无法获得令牌, 我在 laravel api 上尝试了一个获取请求,它正在获取我的数据并显示在 Angular 中,所以获取请求对我来说工作正常问题是 post 请求虽然我已经多次检查登录凭据并且是正确的
usercontroller.php 其中包含登录方法
class UserController extends Controller
{
public function __construct()
{
$this->middleware('auth:api')->except(['login' , 'register' , 'get_articles']);
}
public function register(Request $request)
{
$validator = Validator::make($request->all() , [
'name' => 'required|min:3|max:100',
'email' => 'required|email|unique:users,email',
'password' => 'required|min:6|max:100',
'c_password' => 'required|same:password'
]);
if($validator->fails())
{
return response()->json(['errors' => $validator->errors()] , 400);
}
$user = new User;
$user->email = $request->input('email');
$user->name = $request->input('name');
$user->password = Hash::make($request->input('password'));
$user->save();
return response()->json(['message' => 'created user successfully'] , 201);
}
public function login(Request $request)
{
if(Auth::attempt(['email' => request('email') , 'password' => request('password')]))
{
$user = Auth::user();
$success['token'] = $user->createToken('myapp')->accessToken;
return response()->json(['success' => $success] , 200);
}
return response()->json(['error' => 'unauthorized'] , 401);
}
Cors.php
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin' , '*')
->header('Access-Control-Allow-Methods' , 'GET,POST,PUT,DELETE,OPTIONS')
->header('Access-Control-Allow-Headers' , 'Origin , Content-Type, Accept, Authorization, X-Request-With')
->header('Access-Control-Allow-Credentials' , 'true');
}
}
这里是login.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Loginform } from '../loginform';
import { LoginService } from '../login.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private http:HttpClient , private LoginService: LoginService) { }
public submitted = false;
public errorMsg;
public email = "";
public pass = "";
public Loginform = new Loginform(this.email , this.pass);
ngOnInit() {
}
onSubmit() {
this.LoginService.login(this.Loginform).subscribe((data) => {console.log(data)} ,
(error) => {//this.errorMsg = error.statusText
console.log(error)});
this.submitted = true;
}
}
和login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Loginform } from './loginform';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor(private http: HttpClient) { }
public url: string = "http://localhost:8000/api/login";
login(loginform : Loginform) {
return this.http.post(this.url , loginform).pipe(catchError(this.handleError))
}
handleError(error: HttpErrorResponse) {
return throwError(error);
}
}
这里是 postman 具有相同凭据的快照 postman snapshot
以及浏览器错误图片 browser
可能会发生这种情况,因为您正在执行两个具有不同 Content-Type 的请求:对于 Postman,您使用的是带有键值主体的 Form-Data,而在 Angular6 服务中,您正尝试将数据发送为JSON.
两种不同的解决方案:
- 从 Laravel 控制器序列化 JSON 对象;
- 尝试在 Angular6 中使用
'Content-Type': 'multipart/form-data'
发送您的数据。