Laravel在我的VueJS + JWT驱动的系统中报告了400(错误请求;未提供令牌)

时间:2018-12-13 08:36:53

标签: vuejs2 laravel-5.2 jwt

当我通过axios从Vue组件提交表单时,将返回400 Bad请求。生成令牌(通过登录/注册)可以正常工作,并且请求标头显示授权标头中存在的令牌。我已经在'handler.php'中检查了异常报告的顺序,并且被触发的JWTException是最后检查的异常类型。我读到我的.htaccess文件可能配置错误,但事实并非如此。

我正在Windows机器上工作,除此之外,我不确定要提供什么其他信息。下面是api.php的内容,下面是处理表单内容的控制器的内容(或现在不是这样!),提交表单时使用的Vue方法以及我的JWT.php内容:

Route::apiResource('/question','QuestionController');
Route::apiResource('/category','CategoryController');
Route::apiResource('/question/{question}/reply','ReplyController');
Route::post('/like/{reply}','LikeController@likeIt');
Route::delete('/like/{reply}','LikeController@unLikeIt');

Route::group([

  'middleware' => 'api',
  'prefix' => 'auth'

], function ($router) {

  Route::post('login', 'AuthController@login');
  Route::post('logout', 'AuthController@logout');
  Route::post('signup', 'AuthController@signup');
  Route::post('refresh', 'AuthController@refresh');
  Route::post('me', 'AuthController@me');
  Route::post('payload', 'AuthController@payload');

QuestionController.php

namespace App\Http\Controllers;

use App\Models\Question;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
use App\Http\Resources\QuestionResource;
use App\Http\Requests\QuestionRequest;

class QuestionController extends Controller
{
  public function __construct()
  {
    $this->middleware('JWT', ['except' => ['index','show']]);
    //No one can create a question without having a token
  }

  public function store(Request $request)
  {
    $request['slug'] = str_slug($request->title);
    auth()->user()->question()->create($request->all());
    return response('Created', Response::HTTP_CREATED); 
}

Create.vue

:
methods: {
  create(){
     axios.post('/api/question',this.form)
     .then(res => console.log(res.data))
     .catch(error => this.errors = error.response.data.error)
  }...

我的JWT.php内容是:

namespace App\Http\Middleware;

use Closure;
use JWTAuth;


class JWT
{
    public function handle($request, Closure $next)
    {
      JWTAuth::parseToken()->authenticate();
      //JWTAuth::toUser(JWTAuth::getToken());
      return $next($request);
    }
}

我在哪里/在哪里找了我所犯的错误?

谢谢

汤姆

1 个答案:

答案 0 :(得分:1)

问题是我在app.js文件中将Authorization标头设置为

const JWTtoken = `Bearer ${localStorage.getItem('token')}`;
window.axios.defaults.headers.common['Authorization'] = JWTtoken;

,但是正在/正在从发送的标题中剥离“承载者”。因此,我更改了将表单内容发送到服务器的方法,以便在此时添加Authorization标头:

        create(){
            const JWTtoken = `Bearer ${localStorage.getItem('token')}`;
            window.axios.defaults.headers.common['Authorization'] = JWTtoken;
            axios.post('/api/question',this.form)
                .then(res => console.log(res.data))
                .catch(error => this.errors = error.response.data.error)
        }

,现在一切正常。

这个问题只花了三天!