미세먼지 측정 어플

firebase 연동하여 인증

Main Idea

vue create 프로젝트명
vue-router 설치
Home.vue, Login.vue, SignUp.vue 컴포넌트 생성
firebase 콘솔에서 프로젝트 생성
Authentication 로그인방법에 '이메일/비밀번호', 'Google' 사용설정으로 세팅
npm을 이용해 node.js용 firebase 모듈 설치 npm install firebase --save

웹앱에 firebase 추가하여 Firebase SDK 스니펫을 복사해 main.js에 붙이기

import firebase from 'firebase'
const firebaseConfig = {    // Initialize Firebase
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<PROJECT_ID>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<PROJECT_ID>.appspot.com",
messagingSenderId: "...",
appId: "..."
};
firebase.initializeApp(firebaseConfig);

컴포넌트 라우터 구조

App.vue 에 router-view 존재
어떤 path든 /login으로 redirect
Login.vue에 이메일, 패스워드 입력필드, 로그인버튼, 구글로그인버튼, 회원가입버튼
- 로그인버튼, 구글로그인버튼 으로 로그인에 성공하면 home으로 라우팅
- 위 과정이 실패하면 signup 으로 라우팅
- 회원가입버튼 클릭시 signup 으로 라우팅
SignUp.vue에서 회원가입, 회원가입 성공하면 home으로 라우팅
Home.vue 에 로그아웃 버튼 클릭시 성공하면 login으로 라우팅

← vuex