学习笔记之vue

vue路由之导航守卫

1、全局守卫

应用场景
在浏览一些网站的时候我们会发现有些地方不登录是进不去的，像个人中心，我的订单，会直接跳转到登陆页。
so，怎么实现这个功能呢？
举个简单的小例子：
周末和家人一起开开心心去公园，突然想去动物园转一转，要知道动物园是需要买票的，走到门口检票员一看你没票，”不好意思先生，我们这需要买票才能进哦”，然后你就赶紧去买票，这样你才能进去。
全局守卫可以说是担任检票员的工作，跳转的工作只有你拥有凭证（票）之后才可以进行，不然的话只能老老实实去买票。先来完成上面这个案例：

...
<body>
<div id="app">
  <router-view></router-view>   
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
/*
  /park
    公园不需要门票
  /zoo
    动物园需要门票
  /ticket
    售票处         
*/
  //创建组件
  const Park = {
    template:`
      <div>公园</div> 
    `
  }
  const Zoo = {
    template:`
      <div>动物园</div>
    `
  }
  const Ticket = {
    template:`
      <div>售票处
        <br>
        <button @click = "getTicket">买票</button>
      </div>
    `,
    methods:{
      getTicket(){
        //买票成功
        sessionStorage.setItem('ticket',1)
        //成功后跳转至来时的路由
        const url = this.$route.query.backURL
        this.$router.push(url ? url : '/') 
      }
    }
  } 

  const routes = [
    {
      name:'park',  
      path:'/park',
      component:Park    
    },{
      name:'zoo',   
      path:'/zoo',
      component:Zoo,
      meta:{auth:true}  
    },{
      name:'ticket',
      path:'/ticket',
      component:Ticket
    }
  ]
  const router = new VueRouter({
    routes     //等同于routes:routes
  })

  const isHave = ()=>{
    return sessionStorage.getItem('ticket')
  }
  //注册全局前置守卫
  router.beforeEach((to,from,next) => {
    if(to.matched.some((route) => route.meta.auth)){
      isHave() ? next() : next({path:'/ticket',query: {backURL:to.fullPath}})   
    }else{
      next()    
    }
  })

  const app = new Vue({
    el:'#app',
    router    //等同于router:router
  })
</script>
</body>
...

这样就完成了一个简单的全局守卫案例。

写一个简单的登录拦截案例

...
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>

    const Index = {
      template:`
        <div>首页</div>
      `
    }
    const Order = {
      template:`
        <div>订单</div>
      `
    }
    const Profile = {
      template:`
        <div>个人中心
          <router-view></router-view>
        </div>
      `
    }
    const Setting = {
      template:`
        <div>设置</div>
      `
    }
    const login = {
      template:`
        <div>
          <p><input type="text"></p>
          <p><input type="text"></p>
          <button @click = "login">登录</button>  
        </div>
      `,
      methods:{
        login(){
          sessionStorage.setItem('loged','1')
          const path = this.$route.query.returnURL
          this.$router.push({path:path ? path:'/'})
        }
      }
    }
    const routes = [
      {
        path:'/',
        component:Index
      },
      {
        path:'/login',
        component:login
      },
      {
        path:'/order',
        component:Order,
        meta:{auth:true}
      },{
        path:'/profile',
        component:Profile,
        meta:{auth:true},
        children:[
          {
            path:'setting',
            component:Setting
          }
        ]
      }
    ]  
    const isLoged = () => {
      return sessionStorage.getItem('loged')
    }
    const router = new VueRouter({
      routes, 
    })
    router.beforeEach((to,from,next)=>{
      if(to.matched.some(route => route.meta.auth)){
        isLoged() ? next() : next({path:'/login', query:{returnURL:to.fullPath}})
      }else{
        next()
      }
    })

    const app = new Vue({
      el:'#app',
      router
    })
  </script>
</body>
...

具体了解 : router.vuejs.org

vue路由之导航守卫

1、全局守卫

猜你喜欢