[Angular] 자바스크립트 로그인 아이디 기억하기

Q. 아이디 기억하기 기능 구현해주세요.

요즘 웬만한 포털사이트에는 구현되어있는 아이디 기억하기 기능이다.

 

 

아이디 기억하기 기능 예시

 

 

아이디 기억하기 버튼을 누르고 로그인을 완료하면,

다음에 로그인 페이지에 접속 시 아이디를 자동 입력하게 하는 요구사항이 있었다.

 

기억하기 후 일정 시간이 경과하면 삭제되게 하는 기능이 있었더라면 쿠키로 구현하였을 테지만

그러한 요구사항이 없었기에 localstorage로 구현하였다.

 

체크 활성화 시에만 localstorage에 아이디 값을 저장하고, 페이지를 로딩할 때 아이디 값이 있는지 없는지만을 판별한다.

아이디가 있으면 아이디를 가져오고 없으면 안 가져오는 심플 로직이다.

정리하자면 다음과 같다.

 

1. 로그인 페이지 접속 시 localstorage에 아이디가 있는지 판별

• 아이디 O 아이디 자동 입력
• 아이디 X 아이디 수동 입력

2. 체크 활성화에 따라서 로그인 시 아이디를 기억할지 안 할지 판별

• 체크 O localstorage에 id값 저장 후 로그인
• 체크 X 바로 로그인

export class LoginComponent implements OnInit {

  constructor() {}
  
  ngOnInit(): void {
  	//페이지 로딩시 localstroage에 값이 있으면 값을 가져와서 userId에 바인딩 없음 말구
    if (localStorage.getItem('id')){
    	this.userId = JSON.parse(localStorage.getItem('id'));
        }
    }
    
    userId='';
    activeRemember=false;
    async login() {
        try{
          //로그인로직생략...
          //아이디 기억하기가 활성되었을경우 localstroage에 저장
          if(this.activeRemember){
            localStorage.setItem('id',JSON.stringify(this.userId));
          }
          //아닐시 로그인로직 실행
        }catch(e){
          console.log(e);
        }
      }
    
  }

HTML에서는 userId의 값이 있으면 userId의 값을 넣어주고 없으면 공백으로 출력한다.

하는 김에 아이디 기억하기 버튼 활성화 비활성화하는 로직도 넣어보았다.

<!-- value에는 userId가 있으면 값을 넣어주고 아닐시에는 공백-->
<input type="text" [value]="userId?.length>0 : userId : ''">

<!-- 아이디 기억하기 버튼클릭시 활성화되어있으면 비활성화시키고 활성화되어있으면 비활성화-->
<!--(click)은 Angular문법-->
<button (click)="activeRemember = activeRemember ? false : true">아이디 기억하기</button>