Перенаправить пользователя, когда пользователь посещает определенный маршрут в Ionic 4 - PullRequest
Новая
       31

Перенаправить пользователя, когда пользователь посещает определенный маршрут в Ionic 4

0 голосов
/ 03 марта 2019

Я работаю в своем приложении Ionic 4 и работаю в системе входа в систему. Когда пользователь войдет в систему, он будет перенаправлен на страницу, где пользователь может проверить вызовы для пользователя, а также когда пользователь не входит в систему, и еслион пытается перейти на страницу, затем он должен перенаправить на другую страницу.

Это мой userlogin.ts : 

async UserLoginDetails($soctype, $socid) {
    const loading = await this.loadingController.create({
      message: 'Please Wait',
      duration: 1100,
      translucent: true,
    });
    await loading.present();
    const userdetailslogin = {
      email: this.userlogindet.value.email,
      password: this.userlogindet.value.password,
      social_type: $soctype,
      social_id: $socid,
    };
    this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
      console.log(data);
      if (data) {
        this.responseEdit = data;
        if (this.responseEdit.status === 'success') {
          console.log(this.responseEdit.data.id);
          this.storage.set('ID', this.responseEdit.data.id);
          this.presentAlertConfirm('Login Successful', 1);
        } else {
          this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
        }
      }
    });
    return await loading.onDidDismiss();
}

async presentAlertConfirm($messge, $para) {
    const alert = await this.alertController.create({
      message: $messge,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            // console.log('Confirm Cancel: blah');
            if ($para === 1) {
              this.modalController.dismiss();
              this.router.navigate(['/tabs/tab2']);
            }
          }
        }]
    });
    await alert.present();
}

Когда пользователь войдет в систему, егоИдентификатор пользователя будет храниться в хранилище.

Это мой tabs.router.module.ts : 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            loadChildren: '../login/login.module#LoginPageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Я хочу, чтобы, когда пользователь не вошел в системуи он попытается посетить маршрут tab2, он должен перенаправить на другую страницу.

Должен ли я использовать службу охраны или я делаю это правильно.Я храню идентификатор пользователя в хранилище, потому что хочу использовать его несколько раз.

Любое предложение или помощь очень приветствуются.Пожалуйста, помогите мне с кодом, потому что я работаю над проектом и хочу завершить его вовремя.

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 04 марта 2019

Вы можете использовать охранника для достижения этой цели.Охранник определит, вошел ли пользователь в систему или нет.Если нет, пользователь будет перенаправлен на другой маршрут (страницу входа или куда вы хотите, чтобы он приземлился).

authentication.guard.ts 

@Injectable({
  providedIn: 'root'
})
export class AuthenticationGuard implements CanActivate {

  constructor(private _router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    let isLoggedIn: boolean = false;

    // NOTE: Do your logic here to determine if the user is logged in or not.

    // return true if use is authenticated
    if(isLoggedIn) return true;

    // else redirect the user to another route and return false.
    this._router.navigate(['login']);
    return false;
  }
}

tabs.router.module.ts 

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      ...
      {
        path: 'tab2',
        canActivate: [AuthenticationGuard],
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      ...
    ]
  }
  ...
];

Угловые ограждения используются как фильтры.Вы можете добавить массив охранников / фильтров к вашему маршруту, которые должны быть выполнены для доступа к этому маршруту (действует как цепочка).В вашем массиве маршрутизации добавьте атрибут canActivate к маршруту, который вы хотите отфильтровать.В приведенном выше примере я добавил AuthenticationGuard к маршруту tab2, который будет запускаться только тогда, когда пользователь пытается получить доступ к tab2 или любому из его дочерних элементов.Вы можете поместить canActivate в корень маршрутов (tabs), чтобы отфильтровать все дочерние элементы маршрута tabs (отфильтрует tab1, tab2 и т. Д.).

https://angular.io/api/router/CanActivate

https://angular.io/guide/router

...