全局、獨享、局部路由守衛

一、創建路由

//創建一個路由器,並暴露
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },

    ]
})

二、全局路由守衛

       全局守衛都是設置在 router 上面的，這個可以在 router/index.js 裏面找到。可以在這裏設置全局守衛，當然也可以在其他地方設置全局守衛，比如 main.js 或者 App.vue。這個看具體的需要了。

路由守衛：保護路由的安全。（權限）

（1）全局前置路由守衛

每次路由切換前/初始化的時候-被調用

全局前置守衛beforeEach全局守衛的回調函數接受三個參數為：to，from，next

三個參數說明：

• to跳轉進入的目標路由對象
•  from當前准備離開的路由對象
•  next調用該方法後，進入下一個鉤子函數，作用類似於express或者koa中中間件裏調用的next

 next函數說明：

• 如果next函數正常調用next()錶示正常進入跳轉路由，導航狀態為確認
•  如果next函數在調用是傳入false，如：next(false)，錶示終端導航跳轉
•  next函數還可以傳參，錶示跳轉到指令路由next("/")，或next({ path:"/" })參數的路由

router.beforeEach((to, from, next) => {
    console.log('前置路由守衛', to, from);

    if (to.meta.isAuth) { //是否需要鑒權
        if (localStorage.getItem('school') === 'atguigu') {
            next() //放行
        } else {
            alert('學校名不對，無權限！')
        }
    } else {
        next()
    }
});

（2）全局後置路由守衛

afterEach全局路由守衛

afterEach全局守衛的回調函數接受兩個參數為 to，from

兩個參數說明：

• to跳轉進入的目標路由對象
• from當前准備離開的路由對象

afterEach沒有next()回調函數，因為在afterEach被調用時，路由已經跳轉完畢。

router.afterEach((to, from) => {
    console.log('後置路由守衛', to, from);
    document.title = to.meta.title || '矽穀系統'
});

三、獨享路由守衛

      使用的鉤子函數與全局路由守衛一致，為beforeEnter，不同的是，路由獨享守衛是定義在路由記錄中，全局路由守衛是定義在入口文件中，路由獨享守衛只在路由進入時有效，全局路由守衛是所有路由跳轉都會被攔截。

      指單個路由配置的時候也可以設置的鉤子函數。

 //是否授權
 meta: { isAuth: true, title: '新聞' },
 //獨享路由守衛
 beforeEnter: (to, from, next) => {
    // ...
    console.log('獨享路由守衛', to, from);
    if (to.meta.isAuth) { //是否需要鑒權
    if (localStorage.getItem('school') === 'atguigu') {
         next() //放行
    } else {
         alert('學校名不對，無權限！')
         }
    } else {
         next()
    }
}

四、組內路由守衛

1.  組件內的守衛是定義在組件內部，組件選項對象中的路由守衛

2.  組件內部路由守衛有三個，為：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave。

3.  beforeRouteEnter組件創建前調用，不能使用組件實例this

4.  beforeRouteUpdate路由被改變，但是組件被複用時調用，比如：動態路由

5.  beforeRouteLeave導航離開時該組件調用 

export default {
    name:'About',
    //通過路由規則，進入該組件被調用
    beforeRouteEnter (to, from, next) {
        console.log('About-beforeRouteEnter', to, from);
        if (to.meta.isAuth) { //是否需要鑒權
            if (localStorage.getItem('school') === 'atguigu') {
                next() //放行
            } else {
                alert('學校名不對，無權限！')
            }
        } else {
            next()
        }
    },
    //通過路由規則，離開該組件時被調用
    beforeRouteLeave (to, from, next) {
        console.log('About-beforeRouteLeave', to, from);
        next()
    }
}