programing

쿠키가 서버에서 캐시하는 vuej 및 vuex에 http only 플래그를 사용하여 쿠키를 설정하는 방법(Laravel)

itsource 2022. 7. 5. 23:15
반응형

쿠키가 서버에서 캐시하는 vuej 및 vuex에 http only 플래그를 사용하여 쿠키를 설정하는 방법(Laravel)

저는 프런트엔드로 VueJs 프로젝트를 하나, 백엔드로 Larabel 프로젝트를 하나 가지고 있습니다.

larabel에서 jwt로 작업하면 사용자 정보가 포함된 jwt 토큰이 반환됩니다.

문제:

이 토큰을 HTTOnly 플래그가 있는 쿠키에 저장해야 하는데 이 쿠키를 어디서 어떻게 설정했는지 모르겠어요!?서버측(Laravel)?클라이언트측(VueJs)에서?

코드:

Larabel의 My Auth Controller:

  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)
                })
            })          

    },
}

서버에 http only 플래그가 있는 쿠키를 생성해야 합니다.예를 들어, nodejs + express는 다음과 같이 합니다.res.cookie("token", token, {httpOnly: true})또한 http only 플래그를 사용하면 클라이언트에서 쿠키를 읽을 수 없습니다.

언급URL : https://stackoverflow.com/questions/58891751/how-to-set-cookie-with-httponly-flag-in-vuejs-and-vuex-that-cookie-cames-from-se

반응형