ng4 html路由跳转,Angular4.x通过路由守卫实现动态跳转界面步骤详解
这次给大家带来Angular4.x通过路由守卫实现动态跳转界面步骤详解,Angular4.x通过路由守卫实现动态跳转界面的注意事项有哪些,下面就是实战案例,一起来看一下。
需求:
最近在做一个网上商城的项目,技术用的是Angular4.x。有一个很常见的需求是:用户在点击“我的”按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册或登录页面
解决
在这里通过Angular的路由守卫来实现该功能。
1. 配置路由信息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. 路由守卫条件(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;
}
}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
ng4 html路由跳转,Angular4.x通过路由守卫实现动态跳转界面步骤详解相关推荐
- php自动加载类与路由,PHP实现路由与类自动加载步骤详解
这次给大家带来PHP实现路由与类自动加载步骤详解,PHP实现路由与类自动加载步骤详解的注意事项有哪些,下面就是实战案例,一起来看一下. 项目目录如下 入口文件index.php<?php def ...
- python跳一跳编程构造_python实现微信跳一跳辅助工具步骤详解
说明 1.windows上安装安卓模拟器,安卓版本5.1以上 2.模拟器里下载安装最新的微信6.6.1 3.最好使用python2.7,python3的pyhook包有bug,解决比较麻烦 步骤 1. ...
- python hook pc微信_python实现微信跳一跳辅助工具步骤详解
说明 1.windows上安装安卓模拟器,安卓版本5.1以上 2.模拟器里下载安装最新的微信6.6.1 3.最好使用python2.7,python3的pyhook包有bug,解决比较麻烦 步骤 1. ...
- python实现微信hook_python实现微信跳一跳辅助工具步骤详解
说明 1.windows上安装安卓模拟器,安卓版本5.1以上 2.模拟器里下载安装最新的微信6.6.1 3.最好使用python2.7,python3的pyhook包有bug,解决比较麻烦 步骤 1. ...
- python hook 微信_python实现微信跳一跳辅助工具步骤详解
说明 1.windows上安装安卓模拟器,安卓版本5.1以上 2.模拟器里下载安装最新的微信6.6.1 3.最好使用python2.7,python3的pyhook包有bug,解决比较麻烦 步骤 1. ...
- 编程 ul 不能一行显示 跳到下行_史上最全的数控G代码编程详解
一.G代码功能简述 G00------快速定位 G01------直线插补 G02------顺时针方向圆弧插补 G03------逆时针方向圆弧插补 G04------定时暂停 G05------通 ...
- 安卓点击图片跳转界面_详解拳头注册 + 安卓LOL试玩教程
玩捷径 - 带你玩转iPhone捷径 hello大家好,我是小唐.因公众号目前的推送机制已改变,可能有时候会看不到小唐新写的作文. 建议大家点击公众号资料页面右上角「...」,把公众号设为星标(置顶) ...
- php 微信公众号跳转小程序,微信公众号菜单添加小程序miniprogrampagepath参数详解php开发公众号-小程序怎么放到公众号菜单里-公众号菜单链接小程序...
1. 随着微信小程序功能的开发,2. 已经可以跟公众号打通了,3. 主要有两种方式:4. 1)在公众号文章中插入小程序5. 2)在公众号菜单中添加小程序6. 第一种方式,7. 子恒老师在前面的课程已经 ...
- 路由器回执路由配置_路由器怎么设置?一般家用路由器配置步骤详解
现在没家每户基本上都有网络接入到家,路由器已经成为很多家庭的必须品了.然而路由器的普及并没有带来路由器配置与基本维护的普及.有许多人其实对路由器的配置还是懵懵懂懂.一直半解的.今天我就教大家简单的家用 ...
- 五、华为鸿蒙HarmonyOS应用开发之Java开发模式下的同一个 Page 里实现页面跳转时无参(有参)传递、回值详解
同一Page内导航 当发起导航的AbilitySlice和导航目标的AbilitySlice处于同一个Page时,您可以通过present()方法实现导航.如下代码片段展示通过点击按钮导航到其他Abi ...
最新文章
- Java 开发Log4j 详细使用教程
- javascript音频管理方案:SoundManager2
- 复制一个文件或者从一个资源获取一个文件并复制
- 新笔记本怎么在桌面添加计算机文件夹,win10桌面悬浮文件夹怎么弄_win10电脑桌面悬浮文件夹如何添加-win7之家...
- 开源神器!答应我,别再用 abc 做变量名了好么!
- python大数据分析基础教程_基于Python的大数据分析基础及实战
- html5增强的页面元素
- ReactNative绑定函数中的this
- 演示:思科交换机的Telnet管理与SSH管理
- centos 编译内核至2.6.39.4
- 时态数据库的应用介绍(1)
- Oracle删除重复记录三种方法
- 全国计算机二级java刷题软件_你知道的计算机二级刷题软件
- 【智能算法第一期】蚁群算法原理和多种改进方法
- Java常用命令与参数设置
- java.util.concurrent 同步器框架详解
- CSS从入门到精通——文本与字体样式1.0
- 圆形标定板_自己改的,圆形标定板,opencv标定代码
- 最简单ListView显示联系人姓名和电话号码
- 正则表达式:密码必须为8~16位非空字符,并包含大小写字母、数字、特殊字符