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自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
php csv操作类代码
2009/12/14 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python命名空间详解
2014/08/18 Python
Python查看微信撤回消息代码
2018/06/07 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python爬虫要用到的库总结
2020/07/28 Python
python PIL模块的基本使用
2020/09/29 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
毕业自我鉴定范文
2013/11/06 职场文书
双十佳事迹材料
2014/01/29 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
会计学习心得体会
2014/09/09 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript