반응형
쿠키가 서버에서 캐시하는 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
반응형
'programing' 카테고리의 다른 글
직렬화 및 직렬화 해제 중 JSON 속성의 다른 이름 (0) | 2022.07.05 |
---|---|
TypeError: 정의되지 않은 저장소 디스패치 vuex의 속성 'token'을 읽을 수 없습니다. (0) | 2022.07.05 |
Vuex Store 및 계산된 속성을 사용하여 컴포넌트에 전달된 객체 배열을 루프하려면 어떻게 해야 합니까? (0) | 2022.07.05 |
Vuetify 외부 페이지 번호가 표시되지 않음 (0) | 2022.07.03 |
C99 stdint.h 헤더 및 MS Visual Studio (0) | 2022.07.03 |