(路由攔截)
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true,
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
複製代碼
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if (store.state.token) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})
*注意:vue與react均可以使用
複製代碼
攔截器
axios.interceptors.request.use(
config => {
if (store.state.token) {
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},
err => {
return Promise.reject(err);
});
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data)
});
複製代碼
http攔截
import axios from 'axios'
import { Loading, Message } from 'element-ui'
axios.defaults.timeout = 5000
var loadinginstace
axios.interceptors.request.use(config => {
loadinginstace = Loading.service({ fullscreen: true })
return config
}, error => {
loadinginstace.close()
Message.error({
message: '加載超時'
})
return Promise.reject(error)
})
axios.interceptors.response.use(data => {
loadinginstace.close()
return data
}, error => {
loadinginstace.close()
Message.error({
message: '加載失敗'
})
return Promise.reject(error)
})
export default axios
複製代碼