토근 /cmd로 vue 프로젝트 생성_0607

패키지 spring_restapi_shop

ShopmemberDto.java

0.00MB

ShopmemberController.java

0.00MB

JwtTokenProvider.java

0.00MB

로그인 유지 : 세션

rest-api : stateless(상태유지안함)

=> 로그인 유지로 token사용. jwt토큰. 토큰에 정보를 담아서 암호화 => 복호화

=> 인증 통과한 유저엥게 생성한 토큰 줌.

=> 유저는 받은 토큰을 요청 헤더에 담아서 보냄

 

 

패키지 spring_restapi_shop.pom.xml에 복사

<pom.xml>
<!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api -->
       <dependency>
           <groupId>io.jsonwebtoken</groupId>
           <artifactId>jjwt-api</artifactId>
           <version>0.11.5</version>
       </dependency>
       <!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-jackson -->
       <dependency>
           <groupId>io.jsonwebtoken</groupId>
           <artifactId>jjwt-jackson</artifactId>
           <version>0.11.5</version>
           <scope>runtime</scope>
       </dependency>
       <!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-impl -->
       <dependency>
           <groupId>io.jsonwebtoken</groupId>
           <artifactId>jjwt-impl</artifactId>
           <version>0.11.5</version>
           <scope>runtime</scope>
       </dependency>

auth패키지에 Provider파일 복사

▼ShopmemberController.java에 추가

// ==================================================================
	// 0607 토큰
	
	@Autowired
	private JwtTokenProvider tokenprovider;//멤버변수로 토큰 브로바이더 추가
	// 회원가입/세션아이디발급/검색/내정보수정/삭제
	
	@PostMapping("/login")
    public Map login(String id, String pwd) {
        Map map = new HashMap();
        boolean flag = false;
        ShopmemberDto dto = service.getMember(id);
        if (dto != null && pwd.equals(dto.getPwd())) {
            String token = tokenprovider.generateJwtToken(dto);  // 토큰 생성
            flag = true;
            map.put("token", token);
        }
        map.put("flag", flag);
        return map;
    }

    // 검색
    @PostMapping("/token")
    public Map getByToken(String token) {
        boolean flag = true;
        Map map = new HashMap();
        try {
        	// 받은 토큰에서 로그인한 사람의 아이디, 타입 정보를 추출
            String id = tokenprovider.getUsernameFromToken(token); 
            int type = tokenprovider.getRoleFromToken(token);
            map.put("id", id);
            map.put("type", type);
        } catch (Exception e) {
            flag = false;
        }
        map.put("flag", flag);
        return map;
    }

    // 검색
    @GetMapping("")
    public Map getInfo(@RequestHeader("token") String token) { // @RequestHeader("token") : 요청 헤더 객체 받아오기
        boolean flag = true;
        Map map = new HashMap();
        try {
            String id = tokenprovider.getUsernameFromToken(token);
            int type = tokenprovider.getRoleFromToken(token);
            map.put("id", id);
            map.put("type", type);
        } catch (Exception e) {
            flag = false;
        }
        map.put("flag", flag);
        return map;
    }
    
    // ==============================================================

 

postman. aaa 정상적으로 로그인했을때 토큰값 받음

 

▼aaa토큰

eyJyZWdEYXRlIjoxNjg2MDk4NzA4NzY1LCJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6MSwidXNlcm5hbWUiOiJhYWEiLCJleHAiOjE2ODYxMDIzMDh9.-r4C7MG-1unKalnWWUm9bV-oWD2QsnEc_qWqcZqIabg

http://localhost:8082/members/token post방식. aaa의 토큰값을 보내면 flag:true 결과를 확인할 수 있음

 

 

 

postman. bbb 정상적으로 로그인했을때 토큰값 받음

▼bbb토큰

eyJyZWdEYXRlIjoxNjg2MDk4ODA1OTI2LCJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6MiwidXNlcm5hbWUiOiJiYmIiLCJleHAiOjE2ODYxMDI0MDV9.MXc8KXnoUhYAvsNWxfVOrpyyREmf-Mhd0ZSO6UkiBY4

---

패키지 shop_client

 

login.html에 아래 코드로 수정

$.ajax({
               url:'http://localhost:8082/members/login',
               type:'post',
               dataType:'json',
               data:{'id':$('#id').val(), 'pwd':$('#pwd').val()},
               success:function(result){
                   if(result.flag){
                       sessionStorage.setItem("token", result.token);
                       location.href="../index2.html";
                   }else{
                       alert('로그인 실패');
                   }
               },
               error:function(req, status){//req:요청객체, status:상태값
                   alert(status);
               }
           });

 

index2 추가

 

 

login.html 실행하고 로그인하면 index2로 넘어가고 id / type 값과 토큰도 출력된다.

---

ajax를 사용하려면 axios를 설치해야함

 

------------------- cmd프롬프트 --------------------------

 

1.

C:\Users\KOSTA>cd c:\vuePrj
c:\vuePrj>npm install axios --save

axios 설치

 

2. 

c:\vuePrj>npm install vue-router --save

라우터 설치

 

3.

vuePrj에 shop프로젝트 생성

c:\vuePrj>vue create shop 치고 엔터.

세번째 선택 후 엔터

Router, vuex  스페이스 눌러서 별표 체크.

3 선택

라우터 히스토리 y

프로젝트 생성됨

서브 실행

---

visual studio code 실행.  shop폴더 열기

 

1.

Router, vue 의존성이 들어간것을 확인할 수 있다.

2.

import axios from "axios";

const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$axios = axios;
app.mount('#app')

 

 

라우터 : 경로를 지정하면 어떤 컴포넌트을 실행할지 지정해줌.

export default router : 외부에 노출할때 이름을 router로 하겠다는 설정.

MemJoin.vue

0.00MB

추가한 링크를 실행되게 하려면 router의 index에 import해줘야함

component이름 등록. 자바 스크립트 페이지로 이동할때 component이름으로도 이동할 수 있다.

라우터에 경로 설정

---

ajax로 서버에 요청보내기