Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)


Posted in Javascript onMay 10, 2018

需求:

最近在做一个网上商城的项目,技术用的是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;
  }
}

总结

以上所述是小编给大家介绍的Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
JavaScript中reduce()的用法
May 11 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 #Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 #Javascript
js合并两个数组生成合并后的key:value数组
May 09 #Javascript
详解Puppeteer 入门教程
May 09 #Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 #Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 #Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
You might like
php 实现Hash表功能实例详解
2016/11/29 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
python黑魔法之参数传递
2016/02/12 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
美德少年事迹材料
2014/01/23 职场文书
李培根演讲稿
2014/05/22 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
实验心得体会范文
2016/01/25 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL