第47章 后端管理首页与Axios拦截守卫原理
1 404全局拦截
1.1 定义布局页：src\views\ 404View.vue
<template>
<el-container>
<el-main>
</el-main>
<el-footer>
<h1>大人，你要找的页面离家出走了！小的正在努力寻找中…</h1>
</el-footer>
</el-container>
</template>
<script>
</script>
<style scoped lang="scss">
.el-container {
margin: 0px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url(../assets/404.png) no-repeat top left;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.el-main {
height: 75vh; //必须定义："height"为：75vh，否则主区域的高度不能达到100%；如果大于75vh整页的调度将超过100%。
}
.el-footer {
color: #FFFFFF;
height: 25vh; //必须定义："height"为：25vh，否则主区域的高度不能达到100%；如果大于25vh整页的调度将超过100%。
}
</style>
1.2 重构路由：src\router\index.js
const routes = [{
path: '/:catch(.*)',
name: '404',
component: () => import('../views/404View.vue')
},
{
path: '/Login',
name: '登录',
component: () => import('../views/LoginView.vue')
},
在Vue3中不需定义任何的拦截守卫方法，只要完成上述定义即可实现404全局拦截，在程序执行后在地址栏中输入任何1个当前项目中不存在的页面就会自动跳转到404页面。
2 端管理首页与Axios拦截守卫原理
2.1 重构端管理首页：src\views\WelcomeView.vue
<template>
<h1>WelcomeView-----Amin</h1>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {};
},
methods: {
async getHomeAdminIndex() {
axios.get('https://localhost:7239/HomeAdmin/Index');
//console.log(res);
},
},
async mounted() {
//通过请求拦截器把Token令牌字符串添加到Header字典实例中，从而授权指定用户有权访问指定页面。
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Token')) {
config.headers.Authorization = localStorage.getItem('Token');
}
return config;
},
error => {
return Promise.reject(error);
});
//通过应答拦截器所对应的状态码进行拦截后，跳转到指定页。
axios.interceptors.response.use(
(config) => {
return config;
},
async error => {
let statusErrorInfo = {
success: false,
message: "错误"
};
if (error.response?.status === 400) {
statusErrorInfo.message =
`${error.response?.status}：由于前端所发送的请求中有语法错误，服务器(后)端不能解析该请求或解析请求时产生错误,从而导致服务器(后)端已处理前端所发送的请求失败。`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
else if (error.response?.status === 401) {
statusErrorInfo.message =
`${error.response?.status}：由于用户未执行登录操作或Token令牌字符串已经过期，所以没有权限访问当前页面。`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
else if (error.response?.status === 403) {
statusErrorInfo.message = `${error.response?.status}：该指定用户虽然已经执行登录操作，但该用户没有访问当前页面的权限。`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
else if (error.response?.status === 422) {
statusErrorInfo.message =
`${error.response?.status}：由于前端所发送的请求中所携带的参数实例与服务器(后)端中对应的API方法所需要的参数实例不匹配,从而导致服务器(后)端已处理前端所发送的请求失败(response)`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
else if (error.response.status >= 500) {
statusErrorInfo.message =
`${error.response?.status}：服务器(后)端中对应的API方法在处理前端所发送的请求时产生错误，服务器(后)端API方法未能完成前端所发送的请求,从而导致服务器(后)端已处理前端所发送的请求失败(response)。`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
else if (error.response.status >= 505) {
statusErrorInfo.message =
`${error.response?.status}：由于服务器(后)端不支持前端所发送的请求的HTTP协议的版本,从而导致服务器(后)端已处理前端所发送的请求失败(response)。`;
console.log(statusErrorInfo.message);
return await this.$router.replace(this.$route.query.redirect ? this.$route.query
.redirect : "/Login");
}
return Promise.reject(error);
}
);
await this.getHomeAdminIndex();
},
};
</script>
2.2 调试
对以上功能更为具体实现和注释见：230220_009shopvue(后端管理首页与Axios拦截守卫原理)。