Angular> 유저 등록, 회원 전용, 세션 저장

유저 등록

-> 가입버튼은 뜨지만 작성 화면은 안나옴.. 미해결

 

 

1. Okta에서 User Registration 기능 키기

 

Security - Profile Enrollment - Action 에서 수정한다. 

 

2. login component 수정

 

Set up self-service registration | Okta Developer

Set up self-service registration | Okta Developer

 

 

 

 

---

VIP 회원 전용

Angular Route Gards

유저가 허가없이는 접속을 못하게 막는 기능.

Angular - Router tutorial: tour of heroes

Angular

GitHub - okta/okta-angular: Angular SDK for Okta's OIDC flow

GitHub - okta/okta-angular: Angular SDK for Okta's OIDC flow

 

 

 

개발 순서

 

1. members-page component 생성

2. HTML 페이지 수정

3. login status component 에 Member button 추가

4. members page component를 위한 route 정의

 

 

 

1. 

ng generate component components/MembersPage

 

2. 

3.

 

4.

 

Config에 oktaAuth와 routes에 members를 추가한다. 

 

 

 

 

---

새로고침 수정

 

카트에 담았는데 새로고침하면 사라지는 현상

카트에 담았는데 로그인하면 사라지는 현상

 

WebStorage API

쿠키를 이용해서 저장할 수 있지만 WebStorage API를 사용하면 더 많은 기능이 있다.

key-value를 사용하여 데이터를 저장한다. 

 

webStorage 는 두 가지 종류가 있다.

웹브러우저 메모리에 저장하는 세션 방식과 컴퓨터 로컬에 저장하는 로컬 방식이 있다. 

 

세션 방식은 서버에 보내지 않는다

Browser session = Web browser client side memory

웹 브라우저 각 탭은 자신만의 session을 갖고 있다. 

데이터는 탭 사이에 나눠지지 않는다. 

한 번 탭을 닫으면 데이터를 쓸 수 없다. 

 

로컬 방식은 컴퓨터에 저장하는 거라서 서버에 보내지 않는다.

웹브라우저를 닫아도 데이터를 쓸 수 있다. 

자바스크립을 이용하거나 캐시 삭제로 지울 수 있다. 

 

데이터에는 같은 origin에서 오는 페이지에서 접근할 수 있다.

Origin = protocol + hostname + port

ex) http://localhost:4200 

같은 origin이란 같은 url인 것 따라서

http://localhost:4200이랑 http://localhost:8080은 다른 origin이다. 

 

로컬 방식은 다른 브라우저끼리 공유될 수 없다. 

web storage에 저장되는데이터는 암호화되지 않고 텍스트로 저장된다.

따라서 중요한 정보는 저장 안하는게 좋다. 

 

 

개발 순서

 

1. 세션에서 데이터를 갖고올 수 있게 CartService 업데이트

2. CartService에서 persistCartItems 메서드를 추가

3. persistCartItems( )를 부를 수 있게 computeCartTotals( ) 수정 

 

 

 

1.

 

웹브라우저의 session storage 참조

storage에서 key값을 읽어서 데이터를 data에 주입.

데이터가 없으면 그대로 null값을 쓰는 것이고

있으면 data를 cartItems 배열에다 집어넣음

 

2. 3.

장바구니에 있는 걸 세션에 저장하는 메서드.

물건을 장바구니에 추가하면 장바구니를 세션에 저장한다. 

서비스를 새로 시작할 때 세션에 있는 걸 가져와서 장바구니 배열에 넣는다. 

이러면 새로고침해도 이전에 있는걸 가져올 수 있다. 

 

총액 계산할 때 persistCartItems 메서드를 사용하면 된다.

 

 

localStorage를 사용하고 싶으면 sessionStorage대신 localStorage를 쓰면된다.

 

Storage값은 개발자도구에서 볼 수 있다.