学习笔记之初始化前端项目2---路由拦截 angular和vue的路由拦截

vue

const whiteList = ['/','/register']; // 不重定向白名单
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  let isLogin=Cookies.get('account')//获取cookie中的登陆信息（也可其他判断方式）
  if(isLogin){
    next();   如果登陆了，执行路由跳转//
  }else{
    if (whiteList.indexOf(to.path) !== -1) {  //判断是否是白名单（一般放些登陆页面，注册页面等）
      next();
    }else{
      Message.info('登陆信息失效，请重新登陆');
      next({
        path: '/', // 没有cookie登陆信息路由跳转到登陆页
        // query:{} // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
      });
    }


  }
})

angular

当监听到路由发生改变时，可进行路由拦截，在这里可以验证角色权限判断跳转路由

angular.module('com.cmp.app').run(function($rootScope) {
  $rootScope.$on('$stateChangeStart',function(event){
    if(toState.name=='login')return;// 如果是进入登录界面则允许
    // 如果用户不存在
    if(ifLoginTrue==false){
      console.log("没有登录")
      event.preventDefault();// 取消默认跳转行为
      // $state.go("login",{from:fromState.name,w:'notLogin'});//跳转到登录界面
    }
  });
});

    // 监听路由开始时触发
   　　 $rootScope.$on('$stateChangeStart', function () {}

　　　 // 监听路由成功时触发
  　　  $rootScope.$on('$stateChangeSuccess', function () {}

　　　 // 监听路由出现错误时触发
  　　  $rootScope.$on('$stateChangeStart', function () {}