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 URL传中文参数引发的乱码问题
Sep 02 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
TS 类型收窄教程示例详解
Sep 23 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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
一年级家长会邀请函
2014/01/25 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
委托书范文
2014/04/02 职场文书
小学五年级学生评语
2014/04/22 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书