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 konfigurierenconst 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' }
]
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;
}
}
Empfohlene Lektüre:
Vue-berechnete Eigenschaften und Listener-Case-Code-AnalyseReguläre gemeinsame Nutzung von JS-AnwendungsfällenDas 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!