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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
javascript事件模型介绍
May 31 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
JavaScript 反射学习技巧
Oct 16 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
大学生专科毕业生自我评价
2013/11/17 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
消防器材管理制度
2014/01/28 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
公司放假通知范文
2015/04/14 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
python热力图实现的完整实例
2022/06/25 Python