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 相关文章推荐
Javascript MD4
Dec 20 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
JS实现简单的九宫格抽奖
Jun 28 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目录管理函数小结
2008/09/10 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
Python 递归函数详解及实例
2016/12/27 Python
Python for循环中的陷阱详解
2018/07/13 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python版百度语音识别功能
2019/07/09 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
浅析Python 序列化与反序列化
2020/08/05 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
一套比较完整的软件测试人员面试题
2012/05/13 面试题
教师年度考核自我鉴定
2014/01/19 职场文书
网络编辑职责
2014/03/01 职场文书
航空学院求职信
2014/06/11 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书