Heim > Web-Frontend > js-Tutorial > Hauptteil

Angular4.x detaillierte Erläuterung der Routenumleitungsschritte durch Route Guard

php中世界最好的语言
Freigeben: 2018-05-22 11:52:19
Original
2227 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Routenumleitung durch Routenwächter 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' }
]
Nach dem Login kopieren

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;
  }
}
Nach dem Login kopieren
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:

Vue-berechnete Eigenschaften und Listener-Case-Code-Analyse


Reguläre gemeinsame Nutzung von JS-Anwendungsfällen

Das obige ist der detaillierte Inhalt vonAngular4.x detaillierte Erläuterung der Routenumleitungsschritte durch Route Guard. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage