我正在使用 Laravel (5.5) 作为后端，使用 Vue (2.5) 构建单页应用程序。一切正常，除了在注销后直接再次登录。在这种情况下，对/api/user 的调用(检索用户的帐户信息并再次验证用户的身份)失败并显示 401 未授权(即使登录成功)。作为响应，用户会直接跳回登录屏幕(我自己写了这个措施作为对 401 响应的 react )。

有效的方法是注销，使用 ctrl/cmd+R 刷新页面，然后再次登录。页面刷新解决了我的问题，这让我有理由相信我没有正确处理 X-CSRF-TOKEN 的刷新，或者可能忘记了 Laravel 使用的某些 cookie(如 here 所述)。

这是用户点击登录按钮后执行的登录表单代码片段。

login(){
    // Copy the form data
    const data = {...this.user};
    // If remember is false, don't send the parameter to the server
    if(data.remember === false){
        delete data.remember;
    }

    this.authenticating = true;

    this.authenticate(data)
        .then( this.refreshTokens )
        .catch( error => {
            this.authenticating = false;
            if(error.response && [422, 423].includes(error.response.status) ){
                this.validationErrors = error.response.data.errors;
                this.showErrorMessage(error.response.data.message);
            }else{
                this.showErrorMessage(error.message);  
            }
        });
},
refreshTokens(){
    return new Promise((resolve, reject) => {
        axios.get('/refreshtokens')
            .then( response => {
                window.Laravel.csrfToken = response.data.csrfToken;
                window.axios.defaults.headers.common['X-CSRF-TOKEN'] = response.data.csrfToken;
                this.authenticating = false;
                this.$router.replace(this.$route.query.redirect || '/');
                return resolve(response);
            })
            .catch( error => {
                this.showErrorMessage(error.message);
                reject(error);
            });
    });
},  

authenticate() 方法是一个 vuex Action ，它在 laravel 端调用登录端点。

/refreshTokens 端点简单地调用这个返回当前登录用户的 CSRF token 的 Laravel Controller 函数:

public function getCsrfToken(){
    return ['csrfToken' => csrf_token()];
}

token 被重新获取后，用户被重定向到主页(或另一个页面，如果提供的话) 使用 this.$router.replace(this.$route.query.redirect || '/'); 然后调用 api/user 函数来检查数据当前登录的用户。

是否还有我应该采取的任何其他措施来完成这项工作，但我忽略了？

感谢您的帮助!

编辑:2017 年 11 月 7 日

在所有有用的建议之后，我想添加一些信息。我正在使用 Passport 在 Laravel 端进行身份验证，并且 CreateFreshApiToken 中间件已到位。

我一直在查看我的应用程序设置的 cookie，特别是 laravel_token，据说它保存了加密的 JWT，Passport 将使用它来验证来自 JavaScript 应用程序的 API 请求。注销时，laravel_token cookie 将被删除。之后直接再次登录时(使用 axios 发送 AJAX post 请求)没有设置新的 laravel_token，所以这就是它不对用户进行身份验证的原因。我知道 Laravel 不会在登录 POST 请求上设置 cookie，但紧接着对/refreshTokens(不 protected )的 GET 请求应该设置 cookie。然而，这似乎并没有发生。

我已经尝试增加对 /refreshTokens 的请求和对 /api/user 的请求之间的延迟，以便给服务器一些时间来让事情井然有序，但无济于事。

为了完整起见，这是我的 Auth\LoginController，它正在处理服务器端的登录请求:

class LoginController extends Controller
{
    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        // $this->middleware('guest')->except('logout');
    }

    /**
     * Get the needed authorization credentials from the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    protected function credentials(\Illuminate\Http\Request $request)
    {
        //return $request->only($this->username(), 'password');
        return ['email' => $request->{$this->username()}, 'password' => $request->password, 'active' => 1];
    }

    /**
     * The user has been authenticated.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  mixed  $user
     * @return mixed
     */
    protected function authenticated(\Illuminate\Http\Request $request, $user)
    {
        $user->last_login = \Carbon\Carbon::now();
        $user->timestamps = false;
        $user->save();
        $user->timestamps = true;

        return (new UserResource($user))->additional(
            ['permissions' => $user->getUIPermissions()]
        );
    }


    /**
     * Log the user out of the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function logout(\Illuminate\Http\Request $request)
    {
        $this->guard()->logout();
        $request->session()->invalidate();
    }
}

最佳答案

考虑到您正在使用 api 进行身份验证，我建议使用 Passport或 JWT Authentication处理身份验证 token 。

关于php - 使用 Laravel 为后端刷新 Vue.js SPA 的身份验证 token ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47032871/