Detaillierte Erläuterung der Schritte zur Implementierung einer dynamischen Sprungschnittstelle durch Routing Guard in Angular4.x

Dieses Mal werde ich Ihnen die Schritte zur Implementierung einer dynamischen Sprungschnittstelle durch Route Guard in Angular4 ausführlich erläutern.

Anforderungen: Ich arbeite derzeit an einem Online-Einkaufszentrumsprojekt und die verwendete Technologie ist Angular4.x. Es gibt eine sehr häufige Anforderung: Wenn der Benutzer auf die Schaltfläche „Mein“

klickt, lesen Sie das Cookie. Wenn Daten vorhanden sind, springen Sie zur Seite mit den persönlichen Informationen, andernfalls springen Sie zur Registrierung. Oder die Anmeldeseite

löst hier, um diese Funktion über Angulars Route Guard zu implementieren.

1. Routing-Informationen konfigurieren

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. Route Guard-Bedingungen (RouteguardService.ts)

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;
  }
}

Ich glaube ich Habe es gelesen Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie React die Anmeldeüberprüfungskontrolle im React-Router-Routing implementiert

Der Routing-Schutz im Angular-Routing So verwenden Sie

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung einer dynamischen Sprungschnittstelle durch Routing Guard in Angular4.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!