일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 프론트
- react
- Docker
- vue login
- 셋팅
- AWS
- 배포
- jwt
- express
- extension
- 기획
- 회고록
- 토이프로젝트
- 뷰
- PWA
- 플러그인
- 로그인
- Git
- vue
- login
- database
- nginx
- Firebase
- javascript
- plugin
- vuex
- vsCode
- 신상마켓
- react-query
- 정리
- Today
- Total
목록vue login (3)
강디너의 개발 일지
사용할 기능들 1. navigation guard - 뷰 라우터 내비게이션 가드 2. axios Intercept - axios 설정 3. Vue cookies 4. vuex 토큰을 이용한 로그인 유지 flow는 아래 사진과 같습니다. 참고 - 쉽게 설명해주셨습니다. https://tansfil.tistory.com/59 쉽게 알아보는 서버 인증 2편(Access Token + Refresh Token) 안녕하세요! 이전 포스팅에는 크게 세션/쿠키 인증, 토큰 기반 인증(대표적으로 JWT)에 대하여 알아보았습니다. 저희가 앱, 웹 혹은 서버 개발을 하면서 꼭 사용하게 되는 인증(Authorization).. tansfil.tistory.com 더 더 검색해보니 사용자가 로그인하면 -> 서버측에서 Acce..
준비물 1. express 서버 키기 2. mysql 서버 키기 3. Vue 서버 키기 *설치 모듈* 서버와 통신하기 위한 axios 설치 상태 관리를 위한 Vuex 설치 Login 기능 만들기 + 인증 1. axios를 main.js 에 넣어서 전역으로 쓸수 있게 합니다. 2. 로그인을 해봅시다. loginSubmit: function() { console.log("로그인"); this.$Axios.post(`http://127.0.0.1:3000/auth/login`, { id: this.user_id, pwd: this.user_pwd}).then( res=> { console.log(res); this.$router.push("/"); } ) }, 리턴값이 이쁘게 나오는 것을 볼 수 있습니다. 3..
Vue 로그인 페이지를 만들어보겠습니다. style 을 scss 를 사용하기 위해서 필요한 모듈인 sass-loader 를 설치해야합니다. npm install --save sass-loader 설치하면 scss를 컴파일 할 수 있습니다. 구조는 다음과 같이 만들겁니다. Templete 로그인 회원가입 로그인 회원가입 Admin User 취소 회원가입 템플릿에서 보실점은 form 에 v-on:submit.prevent="loginSubmit" 입니다. form 안에있는 button type="submit" 인 버튼을 누르면 loginSubmit 함수를 실행하라는 의미입니다. user_id와 user_pwd는 v-model로 설정해주어 나중에 로그인할 때 사용할 것입니다. v-if 로 회원가입버튼을 누르면..