axios拦截

之前写了一篇axios的增删改查 现在在这个基础上添加一下axios拦截

之前做登陆的时候，我都是将用户名和密码存储在cookie里面，登出的时候，再清除cookie，现在有了axios，可以直接判断在当前页面，增加一个meta属性，属性为true，即已登录，为false，则跳转到其他页面。

首先在路由的js页面，分配路径，然后给user页面一个meta属性 requireAuth

在判断是否登录 没有则跳转到login页面

import Vue from 'vue'import Router from 'vue-router'import A from '../components/A'import B from '../components/B'import C from '../components/C'import User from '../components/User'import Login from '../components/Login'Vue.use(Router)const router = new Router({    routes: [        {            path: '/',            redirect:'A'        }, {            path: '/A',            name: 'A',            component:A        }, {            path: '/B',            name: 'B',            component:B        }, {            path: '/C',            name: 'C',            component:C        },{            path: '/Login',            name: 'Login',            component:Login        },{            path: '/User',            name: 'User',             // 需要登录才能进入的页面可以增加一个meta属性            meta: {                 requireAuth: true            },            component:User    }]})// 判断是否需要登录权限 以及是否登录router.beforeEach((to, from, next) => {    if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限        if (localStorage.getItem('username')) {// 判断是否登录            next()        } else {// 没登录则跳转到登录界面            next({                path: '/Login',                query: {redirect: to.fullPath}            })        }    } else {        next()    }})export default router

还有就是在api.js页面，加入element的loding 和 message

import {Loading,Message} from 'element-ui' var loadingstatus// POST传参序列化axios.interceptors.request.use((config) => {    loadingstatus= Loading.service({fullscreen:true})    return config}, (error) => {    loadinginstatus.close()    Message.error({        message:'加载超时'    })    return Promise.reject(error)})// 返回状态判断axios.interceptors.response.use((res) => {    loadingstatus.close()    return res}, (error) => {    loadingstatus.close()    Message.error({        message:'加载失败'    })    return Promise.reject(error)})

效果图（因为没有后台，所以只是模拟一下登录与未登录）

当屏蔽这一段meta时。user页面正常显示

当meta正常，user页面由于没有登录，所以显示login页面