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(); } })