关于Vue和Angular的登录的路由守卫

路由守卫

在路由跳转前做一些验证。
先说个例子，比如一个项目有登录，假如有调皮的人知道你登录后的界面的URL地址，直接在地址输入，如果没有这个验证，那么可能ta就可以直接进入你的界面了。或者ta已经登录了，但是又想到要回到登录，但就是不退出······。这时候应该就知道了路由守卫的意义了。
今天说说我做项目用Vue和Angular的路由吧！
首先，我的项目登录之后的话，会保存一个user(一个登录与否的判断)在sessionStorage。

在校学生，第一次写博客，有错的话请指出，我改。谢谢，望体谅。

Vue

Vue的话，路由是用到了**vue-router**。多说无益，上代码：

//to代表要去到的路由，from是来的路由，next可以设定想要跳转的路由
//假如现在是登录：from，要去到首页：to
router.beforeEach((to, from, next) => {
  const isLogin = sessionStorage.getItem('isLogin')?true:false;//保存的登录信息是否存在
  //console.log(isLogin);
  if(to.path == '/login'){
    isLogin ? next('/'):next();
  }else {
    isLogin ? next():next('/login');
  }
})

当然在界面跳转后你还有什么事的话，你还可以：

router.afterEach((to, from, next) => {
    
})

在这个函数里面进行。

Angular

我实习的时候，本来以为会用上Vue（之前学习Vue，做过项目，对Vue熟悉），但是公司用的是Angular1啊，怎么办，太菜了，Angular7倒是自学了点，什么都是他们自己搭建的，我来他们就已经做了一半了。刚刚接手不熟悉就协助开发，然后啊，就叫我看代码；再然后，就发现了他们没有做路由守卫；然后呢，我提出来了；所以，既然我提出路由守卫，就安排我边做路由守卫边熟悉代码吧，然后，然后就是下面咯：

angular.module('app', [])	//这儿是定义，参数可改
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
        //这里的路由什么的，大家的都不同，自己加吧，大致会用到这些
        //$stateProvider.state();
        //$locationProvider.hashPrefix('');
        //$urlRouterProvider.when("", "");
        //$urlRouterProvider.otherwise("");
    })

上面的配好了之后加上这里，就是路由的判断了：

.run(['$rootScope', function ($root, $state) {
    $root.$on('$stateChangeStart', function (...e) {	
    	//这里的$root好像还可以是$rootScope，至于...e的话，可以去学学ES6，就知道了，我的理解就是剩余参数都放在e这个数组，你可以通过console.log(e)查看。
        // e: [{…}, {…}, {…}, {…}, {…}, {…}]

        event = e[0];
        newUrl = e[1].url;
        oldUrl = e[3].url;
        //用户是否登录
        const isLogin = sessionStorage.getItem("user")?true:false;
        if (newUrl !== oldUrl) {
            /**
             * 
             * 路由守卫。
             * 1.通过获取sessionStorage.getItem("user")来判断；
             * 2.由其他页面跳入登录页面，判断是否已经登录，已登录需要先退出；
             * 3.未登录便进入其他界面，需要先登录。
             *  
             * */

            if(newUrl == '/login'){
                if(isLogin){
                    // 阻止跳转行为
                    event.preventDefault();
                    layer.msg("对不起，您已登录！切换请先退出账号！");
                }else {
                   //这儿是通过了，可以跳转了，有什么比如什么提示框等等，自己写吧。
                }
            }else {
                if(!isLogin) {
                    // 阻止跳转，先登录
                    event.preventDefault();
                    layer.msg("对不起，您还未登录！请先登录！");
                }else {
                    //这儿也是通过了，你想干什么自己写
                }
            }
        }
    });
}]);

上面的layer.msg()不知道？去layUI官网看吧。既然说到layUI，我用Vue还用过**ElementUI** 。还有Angular用到了**bootstrap**。大家都可以学的，毕竟技多不压身嘛。

第一次写博客，有问题的话，望体谅，谢谢。