美文网首页
ionic4 入门 (四) 路由守卫

ionic4 入门 (四) 路由守卫

作者: 微笑城ios | 来源:发表于2019-03-22 20:11 被阅读0次

ionic4 入门 (四) 路由守卫

判断用户是否登录 , 在进入购物车和个人中心 界面的时候, 如果用户没有登录, 需要让用户先进入登录界面

创建守卫

  • cli ionic g guard guard/loginGuard 创建守卫

    图片
  • 编写守卫规则

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { NavController } from '@ionic/angular';

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

  constructor(private nav: NavController) {

  }
  // tslint:disable-next-line:max-line-length
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    const token = window.localStorage.getItem('token');
    if (token == null || token === undefined) {
      this.nav.navigateForward('login');
      return false;
    }
    return true;
  }

}

注册路由

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginGuardGuard } from 'src/guard/login-guard.guard';
import { HttpClientModule } from '@angular/common/http';
import { HttpService } from './http/http.service';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    LoginGuardGuard, // 注册路由守卫
    HttpService, // 网络请求的服务
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

使用守卫

  • tabls.module.ts 界面,配置路由守卫
{
        path: 'cart',
        children: [
          {
            path: '',
            loadChildren: '../cart/cart/cart.module#CartPageModule',
            canActivate: [LoginGuardGuard]
          }
        ]
      },
      {
        path: 'mine',
        children: [
          {
            path: '',
            loadChildren: '../mine/mine/mine.module#MinePageModule',
            canActivate: [LoginGuardGuard]
          }
        ]
      }

测试路由效果

如果不行 请留言

相关文章

  • ionic4 入门 (四) 路由守卫

    ionic4 入门 (四) 路由守卫 判断用户是否登录 , 在进入购物车和个人中心 界面的时候, 如果用户没有登录...

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • 路由守卫

    路由守卫分为三种 全局守卫: 路由独享守卫卸载route里 组件内守卫:写在组件配置对象里

  • [VUE]动态的更新页面的Title

    首先可以用路由守卫 + VueRouter来实现路由守卫相关文档1.main.js里加入路由守卫 // 页面修改时...

  • vue学习笔记(八)导航守卫(全局守卫,路由独享,组件内守卫)

    导航守卫-全局守卫 导航守卫-路由独享 导航守卫-组件内守卫

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

  • vue路由守卫

    概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...

  • vue学习(52)vue-router(4)

    路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫(我们可以在meta中配置一些信息) ...

  • 路由

    全局守卫就是每一个路径进来都会经过这个全局守卫的处理 单路由守卫就是把守卫指定给某一个路由 组件内路由就是把守卫放...

网友评论

      本文标题:ionic4 入门 (四) 路由守卫

      本文链接:https://www.haomeiwen.com/subject/qhqdvqtx.html