vue-resource 공부중에 궁금한 부분이 생겨 여쭤봅니다. about vue-camp

[yamoo9]

Token 정보 값을 Back-End에서 가져와 Front-End에서 사용할 때
코드를 통해 외부로 노출시키지 않기 위한 방법은 쿠키(Cookie)를 사용하거나,
로컬 스토리지(local storage)를 사용합니다.

HTTPS 전용 쿠키에 액세스 토큰을 저장하는 것이 가장 좋은 방법으로
로컬 스토리지에 액세스 토큰을 저장하는 방법보다 안전합니다. 이유로는
XSS 공격에 로컬 스토리지가 매우 취약하기 때문입니다.

아래 코드는 Express.js 프레임워크에서 passport를 사용해 인증하는 미들웨어 예제입니다.
쿠키를 사용해 토큰을 설정하고 이를 사용합니다.

app.get('/auth/facebook/callback',
    passport.authenticate('facebook', {
        session: true
    }), function(req, res) {
        res.cookie('token', '1234567890', {
            maxAge: 3600000
        });
        res.redirect('/');
    }
);

하지만 아래 방법들은 로컬 스토리지를 사용하는 방법 들입니다. 참고해보세요.

Vue.http.interceptors.push({
  // 요청
  request: (request) => {
    // 로컬 스토리지에 저장된 _token 정보 값을 가져옵니다.
    const token = localStorage.getItem('_token')
    // 토큰 정보 값이 없을 경우, 토큰 설정합니다.
    if (token !== null && token !== 'undefined') {
      request.headers.set('Authorization', 'Bearer ' + token);
    }
    return request;
  },
  // 응답
  response: (response) => {
    if (response.status && response.status === 401) {
      // 401 오류 발생 시, 토큰을 제거합니다.
      localStorage.removeItem('_token')
    }
    // _token 로컬 스토리지 아이템을 설정합니다.
    if (response.data.success && response.data.result.token) {
      localStorage.setItem('_token', response.data.result.token)
    }

    // 토큰 리프레시
    if (response.headers('Authorization')) {
      localStorage.setItem('_token', response.headers('Authorization'))
    }

    return response;
  }
});

그리고 vue-token 플러그인을 사용하여 토큰을 로컬 스토리지에 관리하는 방법도 살펴보세요.

[shaun-glass]

친절한 답변 감사합니다 :) !!