vue路由拦截器

vue路由拦截，针对要先登录才能进入的页面

直接上代码：

router.js

{

   path: '/Register',

    name: 'Register',

    component: (resolve) => {

                require(['../components/Register'], resolve)

         }

}, {

    path: '/Luck',

    name: 'Luck',

// 需要登录才能进入的页面可以增加一个meta属性

     meta: { 

                requireAuth:true; //说明这个路由需要登录才能跳转

          },

       component: (resolve) => {

        require(['../components/luck28/Luck'], resolve)

          }

    }

    router.beforeEach((to,from,next)=>{

        if(to.meta.requireAuth) {

            //判断该路由是否需要登录权限

            if(store.state.token) {

                //通过vuex state获取当前的token是否存在

                    next();

                 }else{

                    next({ path:'/login', query:{redirect:to.fullPath}

                    //将跳转的路由path作为参数，登录成功后跳转到该路由}) 

                     } }else{

                    next(); }})

上面是简单的前端路由拦截器，但是有时候token时间长了会失效，则需要跳转页面时监听http请求

                        import  axios  from 'axios'

                        import  store  from './store/store'

                        import *astypes from './store/types'

                        import router from'./router'

                        //axios 配置

                        axios.defaults.timeout=5000;

                        axios.defaults.baseURL='https://api.github.com';

main.js

       在main.js里面引用