Приложение Ionic 3 - разрешить навигацию по странице, если пользователь вошел в систему (отметьте в одном месте, а не в каждом компоненте)

Question

Как добавить, проверить, зарегистрирован ли пользователь или нет, и в соответствии с этим разрешить переход на нужную страницу или нет?Не стоит добавлять:

ionViewCanEnter() {
  return this.auth.isAuthenticated();
}

проверка в верхней части каждого компонента ...

Answer 1

Я рекомендую использовать маркер аутентификации для входа в систему.Это позволит вам локально хранить как переменную или локальное хранилище, и вы можете внедрить его в свой сервис или провайдера для использования в приложении.Если вы не уверены в том, как они работают, в сети есть много ресурсов, но в конечном итоге все зависит от вашего внутреннего сервера.Вот пример: Пример Auth Token

Кроме того, я бы порекомендовал вам использовать блоки *ngIf операторов на ваших html-страницах, где кнопки переходят к самим страницам и выдают предупреждение, если пользовательпытается нажать на кнопку для навигации.

У меня есть пример кода, который также поможет вам с этим.

LoginPage.ts

          
            // API POST authentication
            this.API.validateUser(form.value).then((result) =>{
              form.reset();//clears values of the form after data is saved to array
              this.res = JSON.parse(result.toString());//converts result to array
              //console.log(this.res);
              if(this.res.token!=""){//sets authtoken to local storage
              this.storage.set('authToken',this.res.token)
                  }
              //console.log(localStorage);
              if(this.res.status == true){
               setTimeout(() => {
                LoginPage.initialLogin = true;
                this.navCtrl.push(MenuPage);
                 loading.dismiss();
              }, 1000);
            }

MenuPage.ts

// MenuPage.ts 
 /* calls local storage once user hits menupage*/

     if(LoginPage.initialLogin==true){
        //console.log('Initial Login is:',LoginPage.initialLogin);
       this.storage.get('authToken').then((data)=>{//grabs local storage auth token
       if(data!=null){
       //console.log('GET request happened');
       this.loggedIn = true;//User is logged in
       this.reap.grabAPIData(data);//calls service to grab API data on initial login
        }
     });
    }
    else{
      this.reap.getLocalStorage();
      //console.log('Initial Login is:',LoginPage.initialLogin);
    }

MenuPage.html

Здесь вы можете использовать свое значение, чтобы определить, что пользователь может видеть или не видеть.Кнопка может быть скрыта или вы можете добавить предупреждение в файл .ts, который позволяет пользователю знать, что он не вошел в систему.

  <ion-item   *ngIf="loggedIn" no-lines>
    <button  class="menuButton" ion-button large block (tap)="toNexPage()" >
     Next page</button>
  </ion-item>