박재형 / IT 개발 공부

Vue.js 개발 Full 가이드

pjh8838 — Fri, 3 Jan 2025 14:52:31 +0900

Vue.js 선택한 이유

접근성 & 낮은 러닝커브 ( 쉽다 그렇지만 성능이 뛰어나다 )

협업에 있어서 약속된 기능들을 사용하기 때문에 코드가 명시적이다.

Vue.js 구조

SPA - 싱글 페이지 어플리케이션

HTML 파일 body 태그 안에서 보여지는 것들이 유저의 요청에 의해서 바꿔치기

SFC - 싱글 파일 컴포넌트

확장명은 .vue, 하나의 컴포넌트 안에서 HTML, CSS, JS 세가지가 관리됌.

Vue.js 개발스타일

Options API

data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직을 정의하는 개발 스타일

옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출

data 메서드 : 해당 컴포넌트에서 사용될 state, 즉 데이터들을 관리해주는 곳

( data에서 반환된 속성은 반응적 상태가 돼서 this에 노출 )

Methods : 속성 값을 변경하고 업데이트 할 수 있는 함수, 템플릿 내에서 이벤트 핸들러로 바인딩 가능

( Methods에서 반환된 함수는 this에 노출 )

LifeCycle : 생명주기 훅은 컴포넌트 생명주기의 여러 단계에서 호출

Composition API ( 권장 )

import해서 가져온 내장 API 함수들을 사용하여 컴포넌트 로직을 정의

SFC에서 <script setup>으로 사용된다.

setup 속성은 컴파일 시 의도된 대로 동작하게 하는 코드 변환 키워드

ref, reactive : 반응성 있는 데이터를 만들 경우, 키워드 사용해서 변수 선언

const count = ref(0) => 초기값을 0으로 설정

const obj = reactive({ name : 'test', age : 30 })

methods : 컴포지션 API에서는 methods 객체를 선언할 필요가 없기 때문에 함수를 그냥 만들어 쓰면 된다.

function increment( ){ count.value++ }

ref로 참조한 데이터에 접근할 경우에는 value로 접근한다.

라이프사이클

어떻게 동작하고 어느 순간에 동작하는지 파악하려면 컴포넌트 ( 프로그래밍 인스턴스 )를 생성해야함

1. 컴포넌트 생성 ( 인스턴스는 객체지향 프로그래밍에서 Class에 소속된 개별적인 객체 )

예를 들어, user라는 클래스를 정의하고 park이라는 객체를 생성할 경우, park 객체는 user 클래스의 인스턴스가 된다.

ex)

( 붕어빵 틀이 class, 붕어빵이 object )

( 붕어빵 틀 클래스에서 '굽다'라는 메소드를 실행시켜서 객체를 굽는다. ) - 여기서 '굽다' 메서드가 라이프사이클

하나의 클래스를 사용하여 수많은 인스턴스를 생성할 수 있다.

만들어진 붕어빵이 인스턴스, 굽는 행위가 인스턴스화

=> 선언 됐을 때 객체, 객체가 메모리에 할당돼서 사용가능한 상태가 인스턴스

=> 만들었을 때 객체, 다 다른 맛의 붕어빵이 만들어져 판매 가능한 상태가 인스턴스

라이프사이클 테이블

핵심문법 1 - UserInterface

선언적 렌더링

- 이중 중괄호 문법을 사용 {{ }}

- 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석

- 실제 HTML을 출력하려면 v-html 디렉티브 사용

- 데이터 바인딩을 템플릿 부분에서 사용할 때 가장 많이 사용

Class와 Style 바인딩

- HTML Class 바인딩

v-bind : class ( 축약형은 :class )

객체로 바인딩 되며 클래스를 동적으로 토글하기 위해 객체를 :class에 전달 할 수 있음

isActive는 state 영역 ( data 영역 )에 선언한 임의의 변수고

true ( active ), false ( isActive ) 값을 가진다.

조건부 렌더링

v-if / v-else-if / v-else

v-show

v-if는 조건부로 블록을 렌더링하는데 사용되고 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 된다.

v-show는 사용법은 동일, 차이점은 v-show가 있는 엘리먼트는 항상 렌더링이 되어 DOM에 남아있다.

v-show는 Element의 display CSS 속성만 전환됌.

리스트 렌더링 ( v-for )

배열 데이터라는 특정한 타입의 데이터를 기반으로 동일한 구조의 UI를 반복호출하는 기능

v-for = "item in items" 문법 필요

item : 배열 내 반복되는 엘리먼트의 별칭

items : 선언한 배열 데이터

v-for="item in items"

items: 반복할 배열이나 객체.
item: 반복되는 각 항목을 나타내는 변수.

결과는 Object.keys()에 기반

핵심문법 1 - UserInterface 실습

선언적 랜더링

클래스, 스타일 바인딩

v-if, v-show

v-show는 true, false 상관없이 항상 렌더링이 됨

v-if는 true 일때만 렌더링이 됌

v-show는 초기 렌더링 비용이 높고

v-if는 전환 비용이 높다. ( 전환 비용 : true, false에 따라 전환 )

v-for

키값 : 필수 ( 해당 데이터의 고유한 값 )

값이 하나인 경우는 배열 자료 이름 넣으면 됌

객체 데이터인 경우 고유한 값을 item.고유값 으로 넣는다

키값이 필수인 이유 ( 성능 )

Key값을 기준으로 렌더링 대상을 식별하면 부하가 적기 때문에 권장

어떤 item이 바뀌었는지 명확하게 식별 가능

<template>
  <div>
    <li v-for="item in sampleArray" :key="item">{{ item }}</li>
    <li v-for="user in otherArray" :key="user.id"> {{ JSON.stringify(user).replace(/[{}]/g, '') }} </li>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const sampleArray = ref(['a', 'b', 'c', 'd', 'e']);
const otherArray= ref([
      { id: 0, name: 'John' },
      { id: 1, name: 'Park' },
      { id: 2, name: 'Lee' },
      { id: 3, name: 'Hwang' }
  ]);
</script>

<style></style>

v-for = "(item, index) in users" :key=" "

(item, index) in users 를 써야 하는 경우

1. 배열 자료 이름 item -> item의 index( 위치 )가 필요할 때 이렇게 사용

2. 배열 요소가 고유하지 않은 경우

- users 배열에 중복된 값이 있을 때 :key로 index를 사용하여 고유성 보장

3. 인덱스 기반으로 계산이나 조건 처리할 때

<template>
  <ul>
    <li v-for="(user, index) in users" :key="index">
      {{ index + 1 }}. {{ user.name }}
    </li>
  </ul>
</template>

<script setup>
const users = [
  { name: 'John' },
  { name: 'Jane' },
  { name: 'Doe' },
];
</script>


// 결과
1. John
2. Jane
3. Doe

key값을 index로 쓸 때 주의할점

index는 배열 내에서 항상 고유하기 때문에, 순서가 바뀌지 않는 정적 배열에서는 문제없이 사용 가능

하지만, 요소의 추가/삭제/재배열이 빈번한 경우에는 고유 ID를 사용하는 것이 더 안전하고 효율적이고 권장됌

물론, index는 항상 고유한 값이지만

:key는 단순한 고유성 뿐만 아니라 DOM 업데이트의 효율성과 의미론적 일관성을 유지하는데 중요한 역할이기 때문

ex)

Cat Woman을 추가하면

key가 index인건 3번째 자리의 데이터던 Superman이 그대로 나옴

key가 배열자료명이면 데이터가 올바르게 삽입된다.

=> 정적 배열에서는 key값에 index를 넣어도 되지만

값이 수정, 재배치 등 자주 바뀌는 배열에서는 무조건 key값은 배열자료명

핵심문법 1 - Data

JWT 정리, 프론트 연동, role 권한, refresh token

pjh8838 — Fri, 20 Dec 2024 17:59:30 +0900

https://wogud.tistory.com/186

로그인 기능 자세하게 적어놓음 ( 비밀번호 해싱 )

1단계: 기본 로그인 기능 및 JWT 발급

1.로그인 기능 작성, JWT 생성 유틸리티 작성 (JwtUtil.java)

mapper.xml

mapper.java

service

serviceImpl

@Service
public class AuthServiceImpl implements AuthService {
	private final AuthMapper authMapper;
	private final PasswordEncoder passwordEncoder;
	
	@Autowired
	public AuthServiceImpl(AuthMapper authMapper, PasswordEncoder passwordEncoder) {
		this.authMapper = authMapper;
		this.passwordEncoder = passwordEncoder;
	}
	
	
	//로그인 기능의 핵심 로직
	@Override
    public boolean authenticate(String username, String password) {
		// DB에서 username으로 사용자 정보 조회
        AuthDTO user = authMapper.findByUsername(username);

        // 사용자 존재 여부 및 비밀번호 검증
        if (user != null) {
        	// 입력된 비밀번호와 db에 저장된 해싱된 비밀번호 비교
            return passwordEncoder.matches(password, user.getPassword());
        }
        return false; // 사용자 정보가 없거나 비밀번호 불일치
    }
}

2. Jwt 생성 및 검증을 위한 유틸리티 클래스

// jwt 의존성

	//jwt
	implementation 'io.jsonwebtoken:jjwt-api:0.11.5'
	implementation 'io.jsonwebtoken:jjwt-impl:0.11.5'
	implementation 'io.jsonwebtoken:jjwt-jackson:0.11.5'

// 시크릿키 생성 ( 이거 실행하면 Console에 시크릿키 생성 )



public class SecretKeyGenerator {

	public static void main(String[] args) {
		SecureRandom secureRandom = new SecureRandom();
		byte[] keyBytes = new byte[32]; // 32바이트 = 256 bits
		secureRandom.nextBytes(keyBytes);
		String secretkey = Base64.getEncoder().encodeToString(keyBytes);
		System.out.println("key: " + secretkey);
		
	}
}

// properties

# jwt 시크릿키
jwt.secret=

// JwtUtil.java




package com.example.demo.auth.util;

import java.security.Key;
import java.util.Date;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import io.jsonwebtoken.io.Decoders;
import io.jsonwebtoken.security.Keys;

@Component
public class JwtUtil {

	@Value("${jwt.secret}") //프로퍼티즈에서 시크릿키 읽기
	private String SECRET_KEY;
	private static final long EXPIRATION_TIME = 1000 * 60 * 60; // 1시간 // 토큰 만료 시간
	
    private Key getSigningKey() {
        return Keys.hmacShaKeyFor(Decoders.BASE64.decode(SECRET_KEY));
    }
	
	// JWT 생성
    public String generateToken(String username, String role) {
        return Jwts.builder()
                .setSubject(username)
                .claim("role", role)
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
                .signWith(getSigningKey(), SignatureAlgorithm.HS256)
                .compact();
    }

    // JWT에서 사용자 이름 추출
    public String extractUsername(String token) {
        return extractClaims(token).getSubject();
    }

    // JWT에서 역할(Role) 추출
    public String extractRole(String token) {
        return (String) extractClaims(token).get("role");
    }

    // JWT 유효성 검증
    public boolean isTokenValid(String token) {
        try {
            return !extractClaims(token).getExpiration().before(new Date());
        } catch (Exception e) {
            return false;
        }
    }

    // Claims 추출
    private Claims extractClaims(String token) {
        return Jwts.parserBuilder()
                .setSigningKey(getSigningKey())
                .build()
                .parseClaimsJws(token)
                .getBody();
    }
}

3. 로그인 요청 처리 DTO 생성

4. 로그인 요청 성공 시 JWT 발급, 토큰 반환 response

// 컨트롤러


package com.example.demo.auth.controller;

import java.util.Map;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.auth.model.AuthLoginRequestDTO;
import com.example.demo.auth.service.AuthService;
import com.example.demo.auth.util.JwtUtil;

import jakarta.validation.Valid;



@RestController
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping("/api/auth")
public class AuthController {
	
	private AuthService authService;
	private final JwtUtil jwtUtil;

	public AuthController(AuthService authService, JwtUtil jwtUtil) {
		this.authService = authService;
		this.jwtUtil = jwtUtil;
	}
	

	// 로그인 처리
    @PostMapping("/login")
    public ResponseEntity<?> login(@Valid @RequestBody AuthLoginRequestDTO request) {
    // ResponseEntity는 HTTP 응답 데이터 다루는 클래스
    // <?>는 타입이 정해지지않았을때 아무 타입이란 의미
    // @Valid 요청 데이터 검증
    // @RequestBody는 클라이언트가 보낸 JSON 데이터를 Java 객체(AuthLoginRequestDTO)로 변환
    // request는 변환된 데이터를 담고 있는 객체
    
        // 서비스 호출: 비즈니스 로직 처리
        // 입력한 사용자 정보가 유효한지 검증
        boolean isAuthenticated = authService.authenticate(request.getUsername(), request.getPassword());

        if (isAuthenticated) {
        	
        	// 인증 성공 : JWT 토큰 생성
        	String token = jwtUtil.generateToken(request.getUsername(), "USER");
        	
        	// 토큰 반환,  Key-Value 쌍이 2개인 of 선택
        	return ResponseEntity.ok().body(Map.of("message", "로그인 성공!", "token", token));	
        	
        } else {
        	// 인증 실패 : 상태코드 401 반환
            return ResponseEntity.status(401).body(Map.of("message", "아이디 또는 비밀번호가 일치하지 않습니다."));
        }
    }

}

2단계: 요청마다 JWT 검증

1. JWT 인증 필터 작성 (JwtAuthenticationFilter.java):

JWT를 검증하고 사용자 정보를 SecurityContext에 저장.

// JwtAuthenticationFilter


package com.example.demo.auth.util;

import java.io.IOException;
import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.web.authentication.WebAuthenticationDetailsSource;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@Component	
public class JwtAuthenticationFilter extends OncePerRequestFilter{
	
	private final JwtUtil jwtUtil;

	public JwtAuthenticationFilter(JwtUtil jwtUtil) {
		super();
		this.jwtUtil = jwtUtil;
	}

	@Override
	protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
			throws ServletException, IOException {
		String authorizationHeader = request.getHeader("Authorization");

        if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) {
            String token = authorizationHeader.substring(7);
            if (jwtUtil.isTokenValid(token)) {
                String username = jwtUtil.extractUsername(token);

                // SecurityContext 설정 (생략 가능)
                UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(
                        username, null, new ArrayList<>());
                authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                SecurityContextHolder.getContext().setAuthentication(authentication);
            }
        }
        filterChain.doFilter(request, response);
		
	}
}

2. Spring Security 설정:

SecurityConfig에 JWT 인증 필터 추가.
JWT 인증 필터 추가

// SecurityConfig



package com.example.demo.config;

import java.util.List;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import com.example.demo.auth.util.JwtAuthenticationFilter;


@Configuration
public class SecurityConfig {
	
	private final JwtAuthenticationFilter jwtAuthenticationFilter;
	
	public SecurityConfig(JwtAuthenticationFilter jwtAuthenticationFilter) {
		this.jwtAuthenticationFilter = jwtAuthenticationFilter;
	}

    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration configuration) throws Exception {
        return configuration.getAuthenticationManager();
    }
	

	@Bean
	public SecurityFilterChain securityFilterChain (HttpSecurity http) throws Exception {
		
		http
        .csrf(csrf -> csrf.disable())  // CSRF 보호 비활성화 (개발 시)
        .cors(cors -> cors.configurationSource(corsConfigurationSource()))   // CORS 설정
        .authorizeHttpRequests(auth -> auth
            .requestMatchers("/api/auth/login").permitAll()  // /public 경로는 누구나 접근 가능
            .requestMatchers(HttpMethod.POST, "/admin/**").hasRole("ADMIN")  // /admin 경로는 ADMIN만 접근 가능
            .anyRequest().authenticated()  // 그 외는 인증 필요
        );
		
		// spring security 6.xxx 이상에서는 and() 없이 설정을 명확히 분리
        http
        .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class);
        
		
    return http.build();
	}
	
	
	@Bean
    public CorsConfigurationSource corsConfigurationSource() {
		// cors 규칙 정의
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of("http://localhost:8080"));  // 프론트엔드 주소 허용
        configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE"));  // 허용할 HTTP 메서드
        configuration.setAllowedHeaders(List.of("*"));  // 모든 요청 헤더 허용
        configuration.setAllowCredentials(true);  // 자격 증명 허용 (쿠키, 인증 헤더 등)

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);  // 모든 경로에 대해 CORS 설정, CORS 설정 범위를 지정하는 것이지 허용하는거 아님 
        return source;
    }
	
	
	// BCryptPasswordEncoder를 Bean으로 등록
	// 패스워드 입력하면 db 비밀번호랑 비교용 - serviceImpl에서
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
	
}

테스트

1) 로그인 요청

2) JWT 인증 요청

프로필 컨트롤러 하나 만들어서 경로 허용 후

Post로 jwt 받고

get으로 테스트

프로필 컨트롤러

SecurityConfig

POST로 토큰 발급

테스트이기 때문에 굳이 db값까지 확인할 필요 없고 테스트 값만 보면 된다.

3단계: 프론트엔드 연동 ( Vue3 )

vue3 문법에 맞춰서 composition API 방식으로 script를 작성,

api는 composables 폴더를 만들어서 따로 관리

// api / index.js
// api 설정파일

import axios from 'axios';

const apiClient = axios.create({

baseURL: 'http://localhost:8081/myapp', // SpringBoot 서버 URL

headers: {

'Content-Type': 'application/json',

timeout: 5000, // 요청 타임아웃 설정

});

// Axios 요청 인터셉터

apiClient.interceptors.request.use(

(config) => {

// 보안을 위해서 나중에 localStorage 대신 Cookie( HttpOnly )나 Refresh token 사용

const token = localStorage.getItem('jwt'); // JWT 토큰 가져오기

if (token && !config.url.includes('/api/auth/login')) {

config.headers['Authorization'] = `Bearer ${token}`;

}

return config;

(error) => {

return Promise.reject(error);

}

);

export default apiClient;

// api / auth.js
// 로그인 API

import apiClient from "./index";

//사용자 로그인 API 함수

export const loginUser = async (username, password) => {

try {

const response = await apiClient.post('/api/auth/login', {

username,

password

}); //POST 요청

return response.data;

} catch (error) {

console.error('Error fetching users:', error.message);

throw error;

}

// composables / login.js
// 로그인 메서드

import { ref } from "vue";

import { loginUser } from "../api/auth";

export default function login() {

const username = ref('');

const password = ref('');

const jwtToken = ref('');

const error = ref(null); // 에러 상태

// 로그인 메서드

const loginM = async () => {

error.value = '';

try {

const response = await loginUser(username.value, password.value);

jwtToken.value = response.token;

localStorage.setItem('jwt', jwtToken.value); // JWT 저장

alert('로그인 성공!');

} catch (err) {

// 에러 객체 err

error.value = err.response?.data?.message || '로그인 실패';

}

};

// 컴포넌트가 마운트되면 API 호출

// 로그인 버튼을 클릭했을 때 호출 되어야 해서 뺴야됌

// onMounted(() => {

// loginM();

// });

return {

loginM,

username,

password,

jwtToken,

error

};

}

// LoginForm.vue
// 로그인 화면

Test

</div>

<!-- 단순히 입력 값을 서버로 보내면 v-model 없어도 되지만

입력값 검증, 초기화 등이 필요하면 v-model이 유용

Vue3 권장사항 -->

<button type="submit" @click="login">Login</button>

<p v-if="error" class="error">{{ error }}</p>

</form>

</div>

</template>

// api, composable 사용

// import { ref } from 'vue';

import { onMounted } from 'vue';

import login from '@/composables/login';

import { useRouter } from 'vue-router';

const router = useRouter(); // Vue Router 인스턴스 생성

const { username, password, error, loginM } = login();

const handleLogin = async () => {

try {

//로그인 함수 호출

await loginM();

//JWT 저장 성공 시 홈화면으로 이동

if(!error.value) {

router.push('/home');

}

} catch (err) {

//err인 이유는 login.js에서 오류객체를 err로 받아왔기 때문

console.log("로그인 처리 중 오류:", err);

}

};

// 토큰 초기화 함수

const initializeTokens = () => {

localStorage.removeItem('jwt');

sessionStorage.removeItem('jwt');

document.cookie = "Authorization=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

};

onMounted(() => {

initializeTokens(); // 로그인 화면 로드 시 토큰 초기화

});

</script>

<style>

.testBox {

height: 200px;

display: flex;

justify-content: center;

align-items: center;

background-color: skyblue;

font-size: 3rem;

}

.loginForm {

display: flex;

justify-content: center;

align-items: center;

height: 100px;

}

</style>

LoginForm.vue에서 handleLogin 호출 → login.js의 loginM 호출 → auth.js의 loginUser 호출.

// router / index.js
// 라우터 requiresAuth 설정
// 라우터 네비게이션 가드 설정

import { createRouter, createWebHistory } from 'vue-router'

// 정적 import

// import HomePage from '@/views/HomePage.vue';

// import HelloWorld from '../components/HelloWorld.vue';

// import DefineProps from '../components/DefineProps.vue';

// import ApiTest from '@/components/ApiTest.vue';

// import LoginForm from '@/components/LoginForm.vue'

const routes = [

{

path: "/",

// 동적 import ( Lazy Loading ) ( 경로 접근시 컴포넌트 가져옴, 성능 최적화 )

// component: LoginForm,

component: () => import('@/components/LoginForm.vue'),

meta: { requiresAuth: false } // 비로그인시 접근 가능

{

path: "/home",

component: () => import('@/views/HomePage.vue'),

meta: { requiresAuth: true } // 로그인해야 접근 가능

{

path: "/HelloWorld",

component: () => import('@/components/HelloWorld.vue'),

meta: { requiresAuth: true }

{

path: "/de",

component: () => import('@/components/DefineProps.vue'),

meta: { requiresAuth: true }

{

path: "/api",

component: () => import('@/components/ApiTest.vue'),

meta: { requiresAuth: true }

];

const router = createRouter({

history: createWebHistory(),

routes,

})

// 네비게이션 가드

router.beforeEach((to, from, next) => {

const isAuthenticated = !!localStorage.getItem('jwt'); // JWT가 존재하면 인증됨

if (to.meta.requiresAuth && !isAuthenticated) {

// 인증이 필요한데 인증되지 않으면 로그인 페이지로 리디렉션

if (to.path !== '/') {

return next('/');

}

} else if (!to.meta.requiresAuth && isAuthenticated) {

// 이미 인증된 상태에서 로그인 페이지로 가려고 하면 홈으로 리디렉션

if (to.path === '/') {

return next('/home');

}

next(); // 다른 경우에는 그대로 진행

});

export default router;

서버에서 토큰 만료 시간을 1시간으로 정함.

로그아웃 안하고 하루가 지났는데 jwt가 남아있고 로그인 유지되는 문제 발견

=> 만료된 토큰 삭제, 로그인페이지로 리다이렉션 로직 추가

//  router / index.js

import { jwtDecode } from 'jwt-decode';


// JWT 만료 확인 함수
const isTokenExpired = (token) => {
    try {
        const decoded = jwtDecode(token);
        const currentTime = Date.now() / 1000; // 현재 시간 (초 단위)
        return decoded.exp < currentTime; // 만료 시간 비교
    } catch (error) {
        return true; // 오류 발생 시 만료로 간주
    }
};


// 네비게이션 가드
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('jwt'); // JWT 가져오기
    const isAuthenticated = token && !isTokenExpired(token); // 토큰 존재 & 유효성 확인

    if (to.meta.requiresAuth && !isAuthenticated) {
        // 인증이 필요한데 인증되지 않은 경우
        localStorage.removeItem('jwt'); // 만료된 토큰 삭제
        return next('/'); // 로그인 페이지로 리디렉션
    }

    if (!to.meta.requiresAuth && isAuthenticated) {
        // 로그인된 상태에서 비로그인 페이지로 접근하려는 경우
        return next('/home'); // 홈으로 리디렉션
    }

    next(); // 조건에 해당하지 않으면 계속 진행
});

728x90

4단계: 역할(Role) 기반 권한 관리

Spring Security에서 URL별 권한 설정:
- /admin/** → ROLE_ADMIN.
- /user/** → ROLE_USER.
컨트롤러에 @PreAuthorize 또는 @Secured 사용.

5단계: Refresh Token (선택 사항)

Access Token과 Refresh Token 발급.
Refresh Token 저장 및 만료 처리.
Refresh Token을 사용한 Access Token 갱신 API 작성.

JWT 기초

pjh8838 — Fri, 20 Dec 2024 11:17:59 +0900

1. session

유저가 로그인하면 서버가 유저한테

입장권 발급 -> 사이트에서 어떤 행동을 할 때마다 입장권 제출

입장권에 들어가있는 정보가 거의 없음 ( 발급번호 하나 )

세션스토어에 있는 발급번호를 조회해서 문제 없으면 통과

2. token

입장권에 들어가있는 정보가 많음

입장권만 조회하고 문제없으면 통과

=> token 방식이 서버에 부담이 덜하다

session은 회원이 많아질수록 부담이 간다.

장점 :

토큰 위변조가 불가능

서버에 토큰 저장할 필요가 없고

검증해서 안전하면 바로 데이터 꺼내쓰면 됌.

jwt는 대충 만들면 심각한 보안이슈가 생김

문제 1 : alg : none 공격

alg를 none으로 변조 후에

변조된 토큰을 사용하면

토큰 자체에 문제가 없다고 판단하고 보안이 뚫리는 경우가 발생

=> 대응 방안

None 알고리즘 사용 금지

문제 2 : jwt는 변환이 쉬움

header, payload, signature 등을 이용해서 토큰을 만드는 것과 반대로

토큰을 디코딩해서 header, payload를 확인할 수 있다

=> 대응 방안

그래서 항상 최소한의 정보를 이용해서 토큰을 만들어야함

이걸 보완하기 위한 jwe 토큰이 따로 있음

문제 3 : 시크릿키

시크릿키를 대충 적으면 때려맞추기 쉬움

=> 대응 방안

생성용 키 / 검증용 키 2개 사용

private + public

문제 4 : jwt 탈취

탈취한 jwt로 접속이 가능

=> 대응 방안

1. HttpOnly cookie

훔치기 어려운 저장소

2. 특정 토큰 블랙리스트

이러면 jwt 장점이 없어지고

토큰의 정보를 하나하나 비교하는 session과 다를게 없음

3. jwt 유효기간 짧게 - 권장

유효기간 : 5분 이후에는 못 쓰니까 안전

이렇게 할려면

재발급하는 refresh token 이 필요

refresh token rotation 방법 필요 - refresh token을 재발급, 재사용하면 토큰을 발급하지 않음

( refresh token 은 언제나 1회용 ) - 이것도 탈취 당할 수 있기 때문

Error creating bean with name 'securityFilterChain' defined in com.example.demo.config.SecurityConfig: Unsatisfied dependency expressed through method 'securityFilterChain'

pjh8838 — Wed, 18 Dec 2024 17:03:16 +0900

SecurityConfig 클래스에 있는 securityFilterChain() 메서드는 HttpSecurity를 파라미터로 받음.
하지만 AnnotationConfigApplicationContext는 Spring Boot 환경의 HttpSecurity 빈을 관리하지 않음.

HttpSecurity는 Spring Security의 웹 환경에서만 사용할 수 있는 객체
현재 PasswordHasher는 독립 실행형 애플리케이션이므로 웹 컨텍스트가 로드되지 않아서 HttpSecurity 빈이 주입되지 않는다.

해결방법 :

PasswordHasher 클래스는 독립 실행형 유틸리티라서

BCryptPasswordEncoder 를 직접 생성해서 사용하는게 가장 간단하고 깔끔하다.

CORS, 시큐리티 기본 설정

pjh8838 — Tue, 17 Dec 2024 14:25:24 +0900

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP

developer.mozilla.org

프론트에서 http 요청을 보낼 때

따로 설정한게 없으면 CORS 오류가 뜸

브라우저에서 일어나는 문제

( CORS로 요청을 막는건 브라우저 - 크롬, 사파리 등등 )

ex)

우리가 어떤 사이트에 로그인하면 다음에 다시 로그인 정보를 입력하지 않도록

정보가 유지되는 경우가 있음

( 내 브라우저에 토큰 등의 정보가 쿠키로 저장이 돼서

로그인 했던 사이트에 접속할 때 요청에 실어보내면

사이트에서 쿠키를 보고 로그인이 돼있다라고 판단)

=> 로그인했던 상태가 유지되고 있다는건 또 같은 사이트에 접속하거나 API 요청을 보낼 때마다

해당 요청들이

나한테서 왔음을 증명하는 인증정보가 크롬에 저장되어 있다.

내 의지랑 상관없이 크롬에 저장되어있는 인증정보를 빼낼 수 있기 때문에

A 사이트에서 B 사이트로 요청이 못가게 끔

브라우저에서 막고 있는 것 ( 요청을 막는 건 SOP, Same-Origin Policy, 동일 출처 정책 )

동일 출처 정책 => 동일한 출처, URL끼리만 API 등의 데이터 접근이 가능하도록 막는것

요청을 막는 SOP를 푸는게 CORS ( 다른 출처간에 리소스를 공유할 수 있도록 하는 것 )

시큐리티 사용 안할 때 ( config 폴더 생성 후 WebConfig.java 생성 - implements WebMvcConfigurer )

@Configuration 어노테이션이 없어도 WebMvcConfigurer가 구현되어 있어서 잘 작동하지만

설정 클래스 임을 명시적으로 나타내기 위해서 @Configuration 어노테이션을 붙이는게 좋다

컨트롤러에 CrossOrigin

시큐리티 사용 할 때

개발 단계

cors를 비활성화 해놓는건 개발 단계까지만

운영 환경에서 비활성화는 보안 위험이 있다.

그냥 요대로 쓰면됌 ( 운영 단계 )

운영단계 config 폴더

원래 http 로직을 return 뒤 http에 붙였었는데

이제 권장하지 않는 방법

authorizeHttpRequests 뒤에 붙는 requestMatchers 도 원래는 antMatchers라는 거에서 바뀜

REST API 호출

pjh8838 — Mon, 16 Dec 2024 18:02:05 +0900

1. src - api 폴더 생성 후 index.js 설정파일 생성

api / index.js

2. API 요청을 목적별로 분리하여 파일로 관리합니다.

예: 사용자 관련 API (src/api/users.js)

3. Composable 로 API 활용 ( Vue3 Composition API에서 권장하는 방법)

src - api

- composables 폴더 생성

MyBatis 오류: Invalid bound statement (not found)

pjh8838 — Mon, 16 Dec 2024 16:22:32 +0900

대부분 오타나 properties 오류

mybatis.mapper-locations:classpath:mapper/*.xml

나는 경로가 잘못돼있었음

Parameter 0 of constructor in com.example.demo.serviceImpl.TestServiceImpl required a bean of type 'com.example.demo.mapper.TestMapper' that could not be found.

pjh8838 — Mon, 16 Dec 2024 15:01:16 +0900

MyBatis 매퍼 인터페이스(TestMapper)가 Spring Bean으로 등록되지 않아 서비스에서 인식하지 못하는 문제

properties 설정, 어노테이션 다 잘 돼있는데 안된다면

의존성 간의 버전이 달라서 안될 수 있음

Gradle 정리 ( Mybatis ) ( API Test, 로그인 인증 )

pjh8838 — Mon, 16 Dec 2024 11:44:42 +0900

build.gradle

properties

DB 정보, mybatis 의존성 추가

hello 테스트

CommandLineRunner implements

import 단축키 - 컨트롤 + 쉬프트 + O

패키지, 파일 생성

리소스 밑에 mapper.xml 생성

java 밑에

컨트롤러, 매퍼, 모델, 서비스 패키지 생성

컨트롤러(클래스)

매퍼(인터페이스)

서비스(인터페이스)

서비스임플(클래스)

DTO(모델, 클래스)

DTO

타입, 컬럼명 적고

우클릭 - 소스 - superclass, using field, getter setter, toString() 생성

Mapper

Service

ServiceImpl 만들때 implements에 service 추가

Mapper 의존성, 생성자 주입

우클릭 - 소스 - using field

Controller

서비스 의존성, 생성자 주입

프론트로 연결할 때는 시큐리티를 적용해줘야 한다.

시큐리티를 적용안하더라도 cors 설정은 해줘야함

Talend API tester에서 DB 값 잘 가져오는지 테스트

url 형식

localhost : ( server.port ) / context-path / 맵핑값

Vue3 Rest API

src - api 폴더 생성

index.js => api 설정파일

users.js => 사용자 api 함수 호출

src - composables 폴더 생성

컴포저블은 Vue 컴포지션 API를 활용하여 상태 저장 로직를 캡슐화하고 재사용하는 함수

api / index.js

api / users.js

composables / useUsers.js

컴포넌트

시큐리티로 프론트엔드 주소 허용한 뒤 데이터 잘 가져오는거 확인.

회원가입, 로그인 만들고 유효성검사, 인증 관련 시큐리티 적용 후 토큰값 가져오기

로그인 기능 구현

1. (프론트) 로그인 페이지 생성

2. 백엔드 로그인 기능, 서버 API 구현

3. (프론트) 로그인 요청 로직 추가

4. 백엔드랑 연동

5. (프론트) 토큰 저장 및 인증 유지

6. (프론트) 인증 헤더 추가

7. (프론트) 로그아웃 기능 구현

8. 추가 작업 ( https, cors, 리프레시토큰 등 )

2번 서버 API 구현 시

JWT or 세션 기반 인증 방식 이렇게 두가지가 있는데

JWT 쓰면됌

1. 로그인 페이지

2. 백엔드 개발 ( API 연동 전 )

1 ) DB에 관리자 계정 생성 ( 비밀번호 암호화 )

util 폴더 생성

PasswordHasher.java 생성

개발단계에서 관리자 계정 생성 시에만 사용!!

PasswordHasher 우클릭해서 직접 실행 ( 직접 실행이 아니면 프로젝트 실행돌려도 실행 안됌 )

복사해서 DB에 비밀번호 대신 입력

2) 로그인 기능 구현

DTO 생성

mapper.xml

mapper.java

service

SecurityConfig

BCryptPasswordEncoder를 Bean으로 등록

BCryptPasswordEncoder를 Bean으로 등록해야지

PasswordEncoder를 어디서든 주입받아 사용 가능

serviceImpl

유효성 검사

의존성 추가

RequestDTO ( 검증용 DTO )

controller

로그인 기능 테스트

다 입력했을 때

아이디를 안적었을때

메세지

JWT

JWT는 클라이언트-서버 애플리케이션에서 인증과 권한 관리를 간단하고 효율적으로 처리할 수 있는 표준 방식.

인증이 필요한 API에 사용

누구나 접근 가능한 내용은 JWT 불필요

의존성 추가

jwt 시크릿키 생성

코드 실행시키면 시크릿키 생성

프로퍼티즈 or yml 에 설정

https://wogud.tistory.com/194 에 JWT 정리 해놓음

Vue3 v-model 한글 딜레이

pjh8838 — Fri, 13 Dec 2024 17:59:44 +0900

v-model 사용하면 한글에서 딜레이돼서 한글자 늦게 표시가 된다

해결방안 =>

영어는 단어가 하나인데 한글은 자음 모음 3개 조합이라 입력시 딜레이가 걸리는 것처럼 보임

v-model로 입력 받으면 하나하나 입력 체크를 받음

v-model이 기본적으로 자바스크립트 input 이벤트와 동일한 기능

input 이벤트 대신 change 이벤트를 사용하면, 입력이 완료된 후에만 값이 업데이트되므로 한글 입력 시 딜레이 문제를 해결할 수 있을 듯 하다.

자료를 찾아보니 v-model.lazy로 하면 change이벤트가 반영된다