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