vue實現路由攔截

首先在定義路由的時候就需要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否需要登錄。如果用戶已經登錄，則順利進入路由， 
否則就進入登錄頁面。

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // 添加該字段，表示進入這個路由是需要登錄的
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

main.js中加入路由鈎子函數,判斷是否登錄

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判斷該路由是否需要登錄權限
        if (localStorage.getItem('token')) {  // 通過vuex state獲取當前的token是否存在

 next();

 } else { next({ path: '/login', // 去登錄頁面 query: {redirect: to.path} // 將跳轉的路由path作為參數，登錄成功后跳轉到該路由  }) } } else { next(); } })