无权限页面

src/router/index.js

@@ -460,6 +460,12 @@ export const constantRoutes = [{
   component: () => import('@/views/errorPages/notFound.vue'),
   hidden: true
 },
+{
+  path: '/notAccess',
+  name: 'notAccess',
+  component: () => import('@/views/errorPages/notAccess.vue'),
+  hidden: true
+},
 ...newRouter
 ]
 
@@ -471,7 +477,6 @@ const createRouter = () => new Router({
 
 const router = createRouter()
 router.beforeEach((to, from, next) => {
-  console.log(to, from)
   if (to.name === '404' && from.path.search(/projectManage|business|workbench/)) {
     next({ name: 'notFound' })
   }

src/utils/request.js

@@ -4,6 +4,7 @@ import axios from 'axios'
 import { loginUrl } from '@/apiConfig/requestIP.js'
 import { Encrypt } from '@/utils/crypto-js.js'
 import { message } from '@/utils/mesDebounce'
+import router from '@/router/index.js'
 
 // create an axios instance
 const service = axios.create({
@@ -115,6 +116,8 @@ service.interceptors.response.use(
       })
       if (error.response.status === 401) {
         location.href = loginUrl
+      } else if (error.response.status === 403) {
+        router.push({ name: 'notAccess' })
       }
     } else {
       error.message = '网络请求超时，请检查网络信息！'

src/views/errorPages/notAccess.vue

@@ -0,0 +1,45 @@
+<template>
+  <section>
+    <img src="../../assets/notAccess.png" class="not-found">
+    <div class="tips">
+      <h3>Oops…没有访问权限！</h3>
+    </div>
+    <div class="button-link">
+      <el-button type="warning" size="mini" @click="linkTo('项目管理')">返回项目管理首页</el-button>
+      <el-button type="primary" size="mini" @click="linkTo('首页')">返回平台首页</el-button>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  methods: {
+    linkTo(name) {
+      this.$router.push({ name: name })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.not-found {
+  margin-top: 160px;
+}
+h3 {
+  color: #444444;
+  font-size: 20px;
+  margin-top: 31px;
+}
+.tips {
+  display: flex;
+  flex-direction: column;
+  color: #666666;
+}
+.button-link {
+  margin-top: 20px;
+}
+</style>