Vue导航守卫(v-router)+用户登录

一.什么是导航守卫(Router)

导航守卫也叫做路由守卫，那么什么叫做路由守卫呢？？？来看一下官方的回答：

官方：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
 
我们可以简单的理解：你是一个管理员但是后台知道你是管理员吗？是不是要通过登录然后后台通过一些标识然后识别才会知道你是管理员然后再去给你展示管理员的页面个功能。
        那如果你是一个用户呢？你想进入管理员页面你也登录，然后后台识别你是用户然后给你跳转到用户页面和相应的功能，这时后台在你登录的时候会根据你的标识然后去校验你是用户还是管理员然后放行去相应的页面，这也就是导航守卫的功能。
如果还不理解大家来看一下没加导航守卫的一个登录页面：

大家是不是可以清晰的看到，我没有通过登录而是通过输入不同的路由地址然后跳到对应的页面大家觉得这样安全吗？？？
再来看一下加了导航守卫的页面：

 
大家可以看到我再次通过更改地址路径跳转始终还是在登录页面，知道我登录后才会跳到对应的页面，哎这就是我们导航守卫的用途，大大的提高了安全性可以防止别人乱闯乱入了！！那我们如何去使用呢？？ 

 二.如何使用导航守卫

导航守卫又称为路由守卫,路由守卫有三种 ：
1.全局守卫：

//前置守卫：在页面要发生跳转之前执行
router.beforeEach((to, from, next) => {

     console.log(to.path); => //将要进入的页面路由对象
     console.log(from); => //当前导航正要离开的路由
     console.log(next); => //是否放行进入
   //...
})

//后置守卫：在页面跳转后执行 
//和前置守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
  // ...
})

如：

<template>
    <div>
        <input type="text" placeholder="请输入用户名" v-model="userName">
        <br>
        <input type="password" placeholder="请输入密码"  v-model="userPassword">
        <br>
        <button @click="sub">登录</button>
    </div>
</template>
<script>
export default {
  data() {
        return {
          userName:'',
          userPassword:'',
        }
  },
  methods: {
    sub(){
        //登录成功后在浏览器中储存一个Flag登录成功表示
        sessionStorage.setItem("Flag", true);
        //跳转的页面和传入的值
         this.$router.push({
                name: "about",
                path: "/about",
                query: {
                  userName: this.ruleForm.user,
                },
              });
    }
  }

router.beforeEach((to, from, next) => {
  // 现有的路由
  var arr = ['/', '/about','/cont','/cont2','/oder']
  // 如果将要进入的路由地址是‘/’的时候
  if (to.path == '/') {
    // 放行
    next()
  }else{
    // 如果后面跳转的页面 没有在我想让他们进入的路由的话
    if(arr.indexOf(to.path)!=-1){
      // 如果有的话 查看用户是否登录(用户登录成功时可以在浏览储存中添加一个标识来判断) 
      var Flag=sessionStorage.getItem('Flag')
      if(Flag){
        next()
      }else{
        // 如果没有就会在注册页面
        next('/')
      }
    }else{
      // 如果跳转的页面没有 在数组里 则会跳到登录页面
      next('/')
    }
  }
})

 这里我们用的是前置守卫 还有另外独享守卫、组件内守卫后面会一一讲解。。。。