前端vue访问接口没有权限时则页面一直加载
目录
前端vue访问接口没有权限时则页面一直加载
1.问题描述
当后端返回接口状态为100时，代表没有权限，该页面不能访问，页面就一直加载。可点击到其他能访问的页面，清除加载状态
2. 效果展示
3. 使用vuex，新添状态进行判断
新添状态放在store/modules/user文件，重要代码如下
const state = {
previousPage: true, // 默认加载,避免loading还未执行就close清除,导致报错
}
const mutations = {
// 同步修改状态走这里
PREVIOUS_PAGE: (state, data) => {
state.previousPage = data
}
}
const actions = {
// 异步修改状态走这里
changePreviousPage({ commit }, data) {
commit('PREVIOUS_PAGE', data)
},
}
export default {
state,
mutations,
actions
}修改 store/getters.js，对 state.user.previousPage 设置别名
const getters = {
previousPage: (state) => state.user.previousPage,
}
export default getters4. 将事件放在封装的请求里 require.js 文件
不要每个请求接口页面都写，避免繁琐重复
import { Loading } from 'element-ui'
// 定义 loading 变量
var loading = null
// axios 响应拦截器
service.interceptors.response.use((response) => {
const res = response.data
// getter 文件已对 state.user.previousPage 设置别名，所以异步写的时别名
var changePage = store.getters.previousPage // 异步获取值
// var changePage = store.state.user.previousPage // 同步获取值
if (res.code === '100') { // 没有权限
// 模块名/方法
store.dispatch('user/changePreviousPage', true) // 异步修改值
// store.commit('user/PREVIOUS_PAGE', true) // 同步修改值
loading = Loading.service({
lock: true,
text: '该页面没有权限',
background: 'rgba(255, 255, 255, 1)',
spinner: "el-icon-loading",
customClass: "perssionsPage-el-loading-mask" // customClass: "你要的类名"
})
} else if (res.code !== '100' && !changePage && loading !== null) {
// 若该页面有多个接口，也不清除加载状态，因此设为 true
store.dispatch('user/changePreviousPage', true)
setTimeout(() => {
loading.close()
});
}
})loading 设置的 class 名放在全局 css 中
.perssionsPage-el-loading-mask {
// 没有权限时 v-loading 添加的样式
z-index: 200 !important;
.el-loading-spinner {
.el-icon-loading, .el-loading-text {
color: #000 !important;
}
}
}5. 点击切换页面
点击左侧导航栏时，修改 previousPage 值，当页面没有权限一直加载时，跳转清除 close
changePage() {
this.$store.dispatch('user/changePreviousPage', false)
}6.优化加载页面
将一直转圈的部分更换为该图片，主要是修改 requert 文件，自己命名的类名
.perssionsPage-el-loading-mask {
// 没有权限时 v-loading 添加的样式
z-index: 200 !important;
background-image: url(../images/noPermission.png);
background-repeat: no-repeat;
background-position: 50% 60%;
background-size: 350px 320px;
.el-loading-spinner {
.el-icon-loading:before {
content: '' !important;
}
.el-loading-text {
color: #000 !important;
}
}
}