axios 请求拦截 和 路由守卫

axios 请求拦截 和 路由守卫

请求拦截

 // 请求拦截  和 响应拦截
    const instance = axios.creat();
    const intercepters = res(instance, URL => {
        instance.intercepters.request.use(config => {
            // 在发布请求之前做些什么，例如加入token
            // ...... ;
            return config;
        }, error => {
            // 请求错误信息
            return Promise.reject(error)
        })

        instance.intercepters.reponse.use(Response => {
            //在接收响应以后该做些什么，例如跳转到登陆页
            // .....?
            return Response;
        }, error => {
            // 对响应错误做点什么
            return Promise.reject(error);
        })
    })

路由守卫

路由守卫其实就是页面跳转的一个生命周期状态，

• to：即将要进入的目标路由对象
• from：当前导航正要离开的路由
• next：执行下一步

  /**
        路由守卫
    */
    Vue.use(VueRouter);

    //路由配置
    const RouterConfit = {
        mode: 'hash',
        routes: routers
    }

    export const router = new VueRouter(RouterConfit);

    //路由执行前  to为页面将跳转到的路由路径，form为页面从哪个页面触发的跳转事件
    router.beforeEach((to, form, next) => {

    })


    //路由执行后
    router.afterEach((to) => {
        window.scrollTo(0, 0)
    })