로컬 스토리지

1. 웹스토리지

웹 스토리지는 사용자의 브라우저에 데이터를 key-value 형태로 저장한다.

 1) 세션 스토리지 : 브라우저 종료시 사라짐

 2) 로컬 스토리지 : 브라우저 종료시에도 유지

 

2. 로컬 스토리지

 도메인마다 따로 저장

 엑세스 토큰을 저장해 유저 확인

 

3. 전략

 1) 로그인 시 웹 스토리지에 토큰을 저장한다. (ApiService.js)

export function signin(userDTO) {
    return call("/auth/signin", "POST", userDTO).then((response) => {
        alert(response.token);
        if (response.token) {
            //로컬 스토리지에 토큰 저장
            localStorage.setItem("ACCESS_TOKEN", response.token);
            // token이 존재하는 경우 Todo 화면으로 리디렉트
            window.location.href = "/";
        }
    });
}

2) ApiService.js 에서 call할 때마다

header에 "Authorization" 부분에 웹스토리지에 저장된 토큰을 붙여서 사용한다.

import {API_BASE_URL} from "../app-config";

const ACCESS_TOKEN = "ACCESS_TOKEN";

export function call(api, method, request) {
    let headers = new Headers({
        "Content-Type": "application/json"
    })
    //헤더에 토큰 인증 추가
    const accessToken = localStorage.getItem(ACCESS_TOKEN);
    if(accessToken&&accessToken !=null){
        headers.append("Authorization","Bearer "+accessToken);
    }

    let options = {
        headers: headers,
        url: API_BASE_URL + api,
        method: method
    };
    if (request) {
        // GET method
        options.body = JSON.stringify(request);
    }
    return fetch(options.url, options)
        .then((response) => {
            if (!response.ok) {
                // response.ok가 true이면 정상적인 리스폰스를 받은것, 아니면 에러 리스폰스를 받은것.
                return Promise.reject(response);
            }
            return response.json();
        })
        .catch((error) => {
            //403(인증되지 않음)이거나 400(bad requset) 인 경우 login으로 리다이렉트
            if (error.status === 403 || error.status === 400) {
                window.location.href = "/login"; //redirect
            };
            // 추가된 부분
            return Promise.reject(error);
        });
}

3) 로그아웃은 웹스토리지에서 토큰을 null로 만들어준다.

//로그아웃
export function signout(){
    localStorage.setItem(ACCESS_TOKEN,null);
    window.location.href = "/login";
}