Explication détaillée des étapes pour implémenter une interface de saut dynamique via Route Guard dans Angular4.x

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter l'interface de saut dynamique via route guard dans Angular4, jetons un coup d'œil.

Exigences : Je travaille actuellement sur un projet de centre commercial en ligne et la technologie utilisée est Angular4.x. Il existe une exigence très courante : lorsque l'utilisateur clique sur le bouton "Mon"

, lisez le cookie. S'il y a des données, passez à la page d'informations personnelles, sinon passez à l'inscription. Ou la page de connexion

résout ici pour implémenter cette fonction via le garde de route d'Angular.

1. Configurer les informations de routage

const routes = [
 { path: 'home', component: HomeComponent },
 { path: 'product', component: ProductComponent },
 { path: 'register', component: RegisterComponent },
 { path: 'my', component: MyComponent },
 { path: 'login', component: LoginComponent, canActivate: [RouteguardService] },//canActivate就是路由守卫
 { path: '', redirectTo: '/home', pathMatch: 'full' }
]

2. Conditions de garde de route (RouteguardService.ts)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

import { Injectable, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, NavigationStart } from "@angular/router";
import userModel from "./user.model";
@Injectable()
export class RouteguardService implements CanActivate {
  constructor(private router: Router, @Inject(DOCUMENT) private document: any) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // this.setCookie("userId", "18734132326", 10);
    //读取cookie
    var cookies = this.document.cookie.split(";");
    var userInfo = { userId: "", pw: "" };
    if (cookies.length > 0) {
      for (var cookie of cookies) {
        if (cookie.indexOf("userId=") > -1) {
          userModel.accout = cookie.split("=")[0];
          userModel.password = cookie.split("=")[1];
          userModel.isLogin = false;
        }
      }
    }
    //获取当前路由配置信息
    var path = route.routeConfig.path;
    if (path == "login") {
      if (!userModel.isLogin) {
        //读取cookie如果没有用户信息，则跳转到当前登录页
        return true;
      } else {
        //如果已经登录了则跳转到个人信息页面，下面语句是通过ts进行路由导航的
        this.router.navigate(['product'])
      }
    }
  }
  setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
  }
}

Lecture recommandée :

Comment React implémente le contrôle de vérification de connexion dans le routage React-Router

Le garde de routage dans le routage angulaire Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!