vuex全家桶系列09-导航守卫

1.导航守卫：

“导航”表示路由正在发⽣改变

完整的导航解析流程:

1. 导航被触发。

2. 在失活的组件⾥调⽤离开守卫。

3. 调⽤全局的·beforeEach 守卫。

4. 在重⽤的组件⾥调⽤ beforeRouteUpdate 守卫 (2.2+)。

5. 在路由配置⾥调⽤ beforeEnter 。

6. 解析异步路由组件。

7. 在被激活的组件⾥调⽤ beforeRouteEnter 。

8. 调⽤全局的 beforeResolve 守卫 (2.5+)。

9. 导航被确认。

10. 调⽤全局的 afterEach 钩⼦。

11. 触发 DOM 更新。

12. ⽤创建好的实例调⽤ beforeRouteEnter 守卫中传给 next的回 调函数。

2.全局守卫：

之前src/router/index.js中的router被导出了，这里就在main.js中做全局的路由守卫了。

🍊使⽤router.beforeEach注册⼀个全局前置守卫：

🤖需求：

有个需求,⽤户访问在浏览⽹站时,会访问很多组件,当⽤户跳转到 /notes ,发现⽤户没有登录,此时应该让⽤户登录才能查看,应该让⽤户跳转到登录⻚⾯,登录完成之后才可以查看我的笔记的内容,这个时候全局守卫起到了关键的作⽤。

• 有两个路由 /notes 和 /login

router.vue

const router = new VueRouter({
routes:[
{
  path: '/notes',
  name: 'notes',
  component: () => import('@/views/Notes')
},
{
  path: "/login",
  name: "login",
  component: () => import('@/views/Login')
},

main.js中的全局路由守卫：

• router.beforeEach会监听每次路由的变化，如果to.path等于"/notes",就去获取用户信息：
  • 有用户信息：直接放行，渲染/notes路由的页面
  • 如果没有用户信息，通过next("/login")跳转到login页去登录

import Vue from 'vue'
import App from './App.vue'

import router from "./router";
Vue.config.productionTip = false

//全局路由守卫
router.beforeEach((to,from,next)=>{
   console.log("我来自",from);
   console.log("我来到",to);
   if(to.path === "/notes"){
     //获取用户登录的信息
     const user = JSON.parse(localStorage.getItem("user"));
     //🍊如果里面有登录信息直接获取并放行否则跳转到login页面
     if(user){
       next()
     }else{
       next("/login")
     }
   }
   next();
})

new Vue({
  //4、挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

login页面：

<template>
<div>
    想看笔记您需要登录<br>
    <input type="text" v-model="name"><br>
    <input type="password" v-model="password"><br>
    <button @click="login">点击登录</button>
</div>
</template>

<script>
export default {
    data() {
        return {
            name: "",
            password: ""
        }
    },
    methods: {
        login() {
            //1.获取用户名和密码（这里通过settimeout来模拟后台请求）
            //2.与后端发生交互
            setTimeout(() => {
                console.log(this.name);
                console.log(this.password);
                let data = {
                    user: this.user
                };
              //将信息存到缓存中去
                localStorage.setItem("user", JSON.stringify(data));
                this.$router.push({
                    name: "notes"
                });
            }, 2000)
        }
    }
}
</script>