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中关于submit和button的区别介绍
Oct 20 Javascript
jQuery功能函数详解
Feb 01 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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
深入array multisort排序原理的详解
2013/06/18 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
js获取内联样式的方法
2015/01/27 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python实现简单学生信息管理系统
2020/04/09 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
UDP协议功能
2013/01/06 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
校园文明倡议书
2014/05/16 职场文书
学校2014年度工作总结
2014/12/06 职场文书
销售会议开幕词
2016/03/04 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
Java Spring读取和存储详细操作
2022/08/05 Java/Android