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 指南/入门基础
Nov 30 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
纯JS实现五子棋游戏
May 28 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
jQuery 技巧小结
2010/04/02 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
js实现登录与注册界面
2017/11/01 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python字符遍历的艺术
2008/09/06 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Java基础面试题
2014/07/19 面试题
教师节商场活动方案
2014/02/13 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
企业授权委托书范本
2014/09/22 职场文书
捐款仪式主持词
2015/07/04 职场文书
三八节活动主持词
2015/07/04 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书