vue 로그인 예제

./src/구성 요소 디렉토리에서 Login.vue 파일을 만듭니다. 그런 다음 로그인 페이지에 대한 템플릿을 추가합니다. vue-router, 간단한 폼 바인딩 및 구성 요소 간의 상호 작용을 사용 하 여이 모든 것을 만들 수 있습니다. Vuex 작업은 vuex 저장소에 돌연변이를 커밋하는 데 사용됩니다. 서버로 사용자를 인증하고 vuex 저장소에 사용자 자격 증명을 커밋하는 로그인 작업을 만듭니다. ./src/store.js 파일을 열고 다음을 작업 개체에 추가합니다. 우리는 그것에 대해 뭔가를 해야, 그리고 우리가 마지막으로 논의 한 바와 같이 우리가 필요로하는 첫 번째 일은 로그인 화면입니다. 상위 구성 요소에는 인증되지 않은 경우에만 표시됩니다. 이 링크는 응용 프로그램에서 로그아웃하는 수단이 됩니다. 태그와 @authenticated 특성을 확인합니다. 이것은 청취자입니다. login.vue 파일에서 인증이라는 이벤트에서 데이터를 내보내므로 사용하는 @authenticated.

일부 데이터가 발견되면 인증 상태를 변경하는 콜백 메서드를 호출합니다. 일반적으로 로그인 화면은 /login, /로그인 또는 기타 URL에 있을 수 있습니다. 그러나 우리의 응용 프로그램은 로그인하지 않고 전혀 사용할 수 없습니다 – 즉, 우리가 API를 설계 하는 방법 – 그래서 우리는 단지에 로그인 화면을 넣어 정당화 될 것이다 / 이 경우. 우선, 이 데모 프로젝트를 복제합니다. 이 로그인 앱을 만드는 기본 단계를 안내하지만 비로그인 부분(예: 저녁 식사 설문 조사 페이지)의 구현 세부 정보는 다루지 않습니다. 여기에 있는 대부분의 예제 코드 블록도 약간 잘립니다. 따라서 데모의 소스 코드가 나란히 열려 있는 이 자습서를 읽는 것이 좋습니다. 코드를 복사하여 붙여붙여야 하는 경우 예제 코드 블록 대신 소스 코드를 사용합니다. 우리는 우리가 401 무단 응답을 얻을 수 있는지 여부를 결정하기 위해 axios 호출을 가로 채고있다. 이렇게 하면 로그아웃 작업을 디스패치하고 사용자가 응용 프로그램에서 로그아웃됩니다. 이렇게 하면 앞에서 디자인한 것처럼 로그인 페이지로 이동하여 다시 로그인할 수 있습니다.

중간에 다소 시작하여 먼저 로그인 양식을 작성해 보겠습니다. 로그인이 실패하면 localStorage에 있을 수 있는 모든 것을 삭제합니다. 또한 오류 메시지를 설정합니다. 하지만 기다려, 우리는 아직 그것을 정의하지 않았다! 이러한 변수가 있어야 한다는 것을 구성 요소에 알려야 합니다. 데이터 섹션에서 이 작업을 수행하여 이렇게 할 수 있습니다. 이 방법을 해결하려면 앱이 처음 로드될 때 checkLogin을 호출해 보겠습니다. signUpWithUsername 처리기의 다음 블록은 SignInForm의 블록과 동일합니다. 등록이 성공하면 약속이 해결되고 로그인 작업을 트리거하기 위해 로그인 이벤트가 내보내집니다. 어쨌든, 우리는 그것이 반환 약속은 모든 것이 잘 진행되는 경우 요청 개체와 로그인을 호출해야한다는 것을 axios말하고, 그렇지 않은 경우 – 로그인실패를 호출해야합니다. 이제 이러한 메서드를 구현해 보겠습니다. 위의 코드는 보호된 응용 프로그램 영역을 나타냅니다. 예를 들어 사용자가 로그인한 경우에만 액세스해야 합니다.

이것이 최종 목표이기 때문에 페이지에 논리를 추가할 필요가 없습니다. 페이지로 가는 것만으로도 충분합니다. 로그인 단추를 클릭하면 값이 비어 있지 않은 경우 제출 함수onSubmit가 호출됩니다. 이렇게 하면 사용자 이름과 암호 값을 사용하여 Skygear 로그인 처리기 로그인WithUsername이 트리거됩니다. 약속이 반환됩니다. 우리의 로그인 응용 프로그램은 두 개의 기본 페이지가있을 것이다, 1) 단순히 로그인 UI와 2) 저녁 식사 설문 조사입니다 MainPage입니다 AuthPage.

admin