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 相关文章推荐
Seajs的学习笔记
Mar 04 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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顺序查找和二分查找示例
2014/03/27 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python制作抖音代码舞
2019/04/07 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
如何在python中写hive脚本
2019/11/08 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
工艺工程师工作职责
2013/11/23 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
公积金贷款承诺书
2015/04/30 职场文书
企业投资意向书
2015/05/09 职场文书
初婚未育证明样本
2015/06/18 职场文书
2015年暑期见闻
2015/07/14 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python