Comments (2)
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 플러그인을 사용하여 토큰을 로컬 스토리지에 관리하는 방법도 살펴보세요.
from vue-camp.
친절한 답변 감사합니다 :) !!
from vue-camp.
Related Issues (19)
- Vue.js 2.3 CheatSheet 를 발견하여 공유합니다. HOT 1
- Nuxt.js도 소개를 해 주실수 있는 지 궁금합니다. HOT 1
- vscode 개발 환경을 구축하고 싶은데 동영상 강좌가 가능할까요? HOT 1
- 죄송하지만 24일 과제 설명을 다시 부탁드립니다. HOT 1
- 6주차 키노트 문서 업로드 요청 드립니다. HOT 1
- 안녕하세요!! 가상 DOM 관련 HOT 5
- bulma와 bootstrap의 차이점이 궁금합니다. HOT 2
- 파이어베이스 참고 자료를 공유합니다. HOT 1
- 현재 배우고 있는 vue와 typescript vue의 차이점이 궁금합니다. HOT 2
- VueJS 2.4.1이 오늘 출시 되었습니다. HOT 1
- vue-cli를 정의하는 문구에 '스캐폴딩'이라는 단어의 뜻이 궁금합니다. HOT 2
- 단일 엘리먼트 전환 효과 동영상 강좌에 사용된 VSCODE Extension이 궁금합니다. HOT 1
- 유튜브 영상이 재생되지않습니다. HOT 1
- 8주차 ~ 10주차 키노트 문서는 별도로 존재하지 않는 것인지 문의 드려 봅니다. HOT 3
- vue 질문은 아닌것 같은데 node에서 DB 를 다루는 기술중 어떤게 많이 쓰이는지 궁금합니다. HOT 2
- 야무쌤 안녕하세요, 키노트 관련하여 질문 드립니다~! HOT 1
- 키노트 문의입니다. HOT 1
- 2017.05 브랜치는 삭제 처리 되었는지 문의 드립니다. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-camp.