如何在 vuejs 和 vuex 中使用 httponly 标志设置 cookie cookie 来自服务器（Laravel）

Question

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

我在 laravel 中使用jwt，它返回包含用户信息的 jwt 令牌。

问题：

我需要将此令牌存储在带有 HTTPOnly 标志的 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。