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 相关文章推荐
九种js弹出对话框的方法总结
Mar 12 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
js尾调用优化的实现
May 23 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
一些PHP写的小东西
2006/12/06 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现rest请求api示例
2014/04/22 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python 如何将office文件转换为PDF
2020/09/22 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
护士自荐信
2013/10/25 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
青年志愿者活动方案
2014/08/17 职场文书
创先争优个人承诺书
2014/08/30 职场文书
学校节水倡议书
2015/04/29 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
nginx+lua单机上万并发的实现
2021/05/31 Servers