vue 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页面