laravel - 如何在 vuejs 和 vuex 中设置带有 httponly 标志的 cookie，cookie 来自服务器(Laravel)

Question

我有一个 VueJs 项目作为前端和一个 Laravel 项目作为后端用于制作 api 和服务器。

我与 jwt 一起工作在 laravel 中，它返回包含用户信息的 jwt token 。

问题:

我需要使用 HTTPOnly 标志将此 token 存储在 cookie 中，但我不知道在哪里以及如何设置此 cookie!？在服务器端(Laravel)？在客户端(VueJs)？

代码:

我在 Laravel 中的 AuthController:

  public function login()
    {
        $credentials = request(['email', 'password']);

        if (! $token = auth()->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }


  protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type'   => 'bearer',
            'expires_in'   => auth()->factory()->getTTL() * 60
        ]);
    }

它返回:

{
    "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC92dWV4LmNhY3R1c3dlYi5pclwvYXBpXC9sb2dpbiIsImlhdCI6MTU3MzkxNDA1NSwiZXhwIjoxNTczODQ3NTQ2YWEiLCJ1c2VyIjp7ImlkIjozLCJuYW1lIjoiYWxpIiwiZW1haWwiOiJhQGEuY29tIiwicm9sZSI6IjIiLCJlbWFpbF92ZXJpZmllZF9hdCI6bnVsbCwiY3JlYXRlZF9hdCI6IjIwMTktMTEtMTQgMDg6MDU6NDUiLCJ1cGRhdGVkX2F0IjoiMjAxOS0xMS0xNCAwODowNTo0NSJ9fQ.Ow785CLmaAckZR9iowVkEMX6AxBQw7JSklt3Vp1btAcG4",
    "token_type": "bearer",
    "expires_in": 3600
}

在我的 Vuex 存储操作中:

const actions = {
    login({commit}, user) {
        return new Promise((resolve, reject) => {
            commit('auth_request');
            Axios.post(`${api_base_url}/login`, user)
            .then(resp => {
                const token = resp.data.access_token;
                commit('auth_success', token, user);
                resolve(resp)
            })
            .catch(err => {
                commit('auth_error');
                reject(err)
                })
            })          

    },
}

Answer 1

您应该在服务器上创建带有 httponly 标志的 cookie。例如，在 nodejs + express 中，您使用 res.cookie("token", token, {httpOnly: true}) 来完成。 另请注意，使用 httponly 标志，您无法在客户端读取 cookie。