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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
javascript prototype 原型链
Mar 12 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
ES6新增的数组知识实例小结
May 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php中大括号作用介绍
2012/03/22 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP加密解密函数详解
2015/10/28 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python进阶教程之循环对象
2014/08/30 Python
python中类的属性和方法介绍
2018/11/27 Python
详解如何减少python内存的消耗
2019/08/09 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python判断正负数方式
2020/06/03 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
PyTorch的torch.cat用法
2020/06/28 Python
python怎么对数字进行过滤
2020/07/05 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
党课知识竞赛主持词
2014/04/01 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
房屋产权证明书
2015/06/19 职场文书
工作态度怎么写
2015/06/25 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL