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 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
JS 数字转换研究总结
Dec 26 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery的框架介绍
May 11 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
vue store之状态管理模式的详细介绍
Jun 13 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 数组实例说明
2008/08/18 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
javascript 节点排序 2
2011/01/31 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
面包屑导航详解
2017/12/07 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python读取Kafka实例
2019/12/23 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
介绍Java的内部类
2012/10/27 面试题
工地门卫岗位职责
2013/12/30 职场文书
励志演讲稿800字
2014/08/21 职场文书
三好学生评语大全
2014/12/29 职场文书
2015年维修工作总结
2015/04/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS