前端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 getters

4. 将事件放在封装的请求里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;
    }
  }
}