[076] Spring+Vue: 회원관리- 로그인&로그아웃 구현

 

2024.08.28(수)
 
Spring+Vue 3일차

 

해당 내용을 배우면서 나만의 프로젝트도 시작하는게

하나의 목표! 수업 내용에 충실하자

 

 

---

 

Spring + Vue

 

 

프로젝트 준비

• CH01.1 프로젝트 준비-백엔드
• CH01.2 프로젝트 준비-프론트엔드

회원관리

• CH02.1 회원관리-회원가입
• CH02.2 회원관리-로그인,로그아웃
• CH02.3 회원관리-정보 수정
• CH02.4 회원관리-비밀번호 변경

게시판

• CH03.1 게시판-백엔드
• CH03.2 게시판-프론트엔드
• CH03.3 인증 가드
• CH03.4 게시판-페이지네이션

 

---

CH02.2 회원관리 - 로그인, 로그아웃

 

Frontend

auth.js

• 인증스토어

1. 쿠키에 저장(유효시간 내엔 계속 유효함)
2. 웹 브라우저에서 제공해주는 스토리지 이용(localStorage)

localStorage

• 웹 어플리케이션 운영가능하는 저장소
• <키, 값>의 쌍으로 정보를 저장
  • 키, 값 모두 문자열로 처리
  • 객체 정보를 저장할 때 JSON 문자열로 변환해서 저장

 

localStorage 주요 메소드

 

• import와 export
  • ES6부터 사용가능한 문법(자바스크립트)
  • package.json에 "type" : "module"을 작성해야만 해당 문법 사용 가능

import { ref, computed, reactive } from 'vue';
import { defineStore } from 'pinia';

// 초기 상태 정의
...

export const useAuthStore = defineStore('auth', () => {

 

• sessionStorage는 브라우저가 종료되면, 저장소도 종료됨

localStorage

 

pages/auth/LoginPage.vue

• preventDefault: 기본 동작 실행 안한다는 것을 의미

<form @submit.prevent="login">

 

• v-if: error 메세지가 있으면 화면에 표시

<div v-if="error" class="text-danger">{{ error }}</div>

 

 

프론트엔드에서는 무조건 로그인될 수 있게 구현(우선)

 

 

 

로그인 - axios 인터셉터

 

• 전달되는 요청과 수신되는 응답 사이에 조작해서 검사하겠다
• 서버 단에서 필터의 역할을 한다

 

axios 인터셉터(interceptor)

• axios의 요청과 응답에 대한 필터 역할
• backend와의 모든 통신은 인증 토큰(jwt)를 포함해야 함
• Axios Interceptor 운영해야 함
• 인터셉터가 설정된 axios 인스턴스를 작성하고, 백엔드 통신시 이 인스턴스를 사용

 

---

 

프론트엔드만 완성했을땐 localhost:5173으로 열어야했음!

그리고 해당 루트를 열면 회원가입이 열리지 않음

 

왜?

 

1. frontend로만 열었기 때문에, 해당 기능은 backend에서 구현해주는 것임!

2. npm run build도 아직 하지 않은 상태

 

---