Explication détaillée d'Angular4.x des étapes de redirection d'itinéraire via Route Guard

Cette fois, je vais vous apporter une explication détaillée des étapes de redirection d'itinéraire via les gardes d'itinéraire dans Angular4. Levez-vous et jetez un œ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 :

Propriétés calculées Vue et analyse du code de cas d'écoute

Partage de cas d'utilisation associé régulier avec JS

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!