feat: 添加跨域

src/api/deployment.js

@@ -0,0 +1,3 @@
+import axios from "@/util/request.js"
+
+export const getTotalDeployments = config => axios.get('/api/deployment/pages', config);

src/components/SideBar.vue

@@ -27,12 +27,38 @@
         <span slot="title">操作日志</span>
       </el-menu-item>
     </el-menu>
+    <div class="logout-fix">
+      <el-tooltip
+        class="item"
+        effect="light"
+        :content="role"
+        placement="right"
+      >
+        <div class="logout-fix-name">{{ name }}</div>
+      </el-tooltip>
+      <div class="logout" @click="logout()">退出登录</div>
+    </div>
   </el-aside>
 </template>
 
 <script>
+import { login } from '@/util/auth.js'
 export default {
-  name: 'SideBar'
+  name: 'SideBar',
+  methods: {
+    logout() {
+      this.$store.commit('logout');
+      login();
+    }
+  },
+  computed: {
+    name() {
+      return this.$store.state.user.user_info.name;
+    },
+    role() {
+      return this.$store.state.user.auth;
+    }
+  }
 }
 </script>
 
@@ -75,4 +101,32 @@ export default {
   color: #7e57c2;
   background-color: #EBF0FE !important;
 }
+.logout-fix {
+  position: fixed;
+  left: 80px;
+  bottom: 30px;
+  &-name {
+    min-width: 60px;
+    background-color: #7e57c2 !important;
+    border-color: #7e57c2 !important;
+    color: #fff;
+    border-radius: 16px;
+    font-size: 14px;
+    height: 32px;
+    text-align: center;
+    padding: 0 10px;
+    // margin-left: -10px;
+    line-height: 32px;
+    margin-bottom: 14px;
+    cursor: pointer;
+  }
+}
+.logout {
+  color: #00000099;
+  font-size: 14px;
+  cursor: pointer;
+}
+.logout:hover {
+  color: #000000;
+}
 </style>

src/main.js

@@ -5,7 +5,6 @@ import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@/assets/css/common.css'
-
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import store from '@/store/index.js'
 import jwt_decode from 'jwt-decode'
 import { Message } from 'element-ui'
+import { login } from '@/util/auth'
 
 Vue.use(VueRouter)
 
@@ -39,25 +40,18 @@ const router = new VueRouter({
   base: process.env.BASE_URL,
   routes
 })
-const login = () => {
-  const location = window.location;
-  const portal = 'http://p.seec.seecoder.cn'
-  window.location = `${portal}/interaction?scope=openid&client_id=seec-devmanage&redirect_uri=${
-    encodeURI(location.origin)
-  }`;
-}
 router.beforeEach((to, from, next) => {
   // 判断是否登录并验证角色信息
   const token = to.query.id_token;
-  console.log(token);
+  // console.log(token);
   if (token) {
     const user = jwt_decode(token);
     if (user.auth === 'SEEC' || user.auth === 'ADMIN') {
       store.commit('setToken', token);
       store.commit('setUser', user);
-      Message.success(user.user_info.name + '， 欢迎进入Devcloud管理端！');
+      Message.success('Welcome, ' + user.user_info.name + '!');
     } else {
-      Message.error('权限不足，请重新登录！')
+      Message.error('权限不足, 请重新登录!')
       login();
     }
     next();

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import jwt_decode from 'jwt-decode'
 
 Vue.use(Vuex)
 
@@ -14,6 +15,8 @@ export default new Vuex.Store({
         return true;
       } else if (localStorage.getItem('token')) {
         state.token = localStorage.getItem('token');
+        const user = jwt_decode(state.token);
+        state.user = user
         return true;
       } else {
         return false;
@@ -22,12 +25,12 @@ export default new Vuex.Store({
   },
   mutations: {
     setToken(state, token) {
-      state.token = token;
       localStorage.setItem('token', token);
+      state.token = token;
     },
     setUser(state, user) {
-      state.user = user;
       localStorage.setItem('user', JSON.stringify(user));
+      state.user = user;
     },
     logout(state) {
       state.token = null;

src/util/auth.js

@@ -0,0 +1,7 @@
+export function login() {
+  const location = window.location;
+  const portal = 'http://p.seec.seecoder.cn'
+  window.location = `${portal}/interaction?scope=openid&client_id=seec-devmanage&redirect_uri=${
+      encodeURI(location.origin)
+  }`;
+}

src/util/request.js

@@ -0,0 +1,137 @@
+// import Axios from "axios";
+
+// const instanceNormal = () => {
+//   let token = localStorage.getItem("token");
+//   let headers = token ? {
+//     "Authorization": 'Bearer ' + localStorage.getItem("token"),
+//   } : {};
+//   console.log(headers)
+//   return Axios.create({
+//     baseURL: 'http://localhost:8080',
+//   });
+// }
+// let token = localStorage.getItem("token");
+// let headers = token ? {
+//   "Authorization": 'Bearer ' + localStorage.getItem("token"),
+//   'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+// } : {};
+// const _get = (url, config) => {
+//   return new Promise((resolve, reject) => {
+//     instanceNormal()
+//       .get(url, {
+//         params: config,
+//         headers: headers
+//       })
+//       .then(data => {
+//         resolve(data.data);
+//       })
+//       .catch(err => {
+//         reject(err);
+//       });
+//   });
+// };
+// const _post = (url, config) => {
+//   return new Promise((resolve, reject) => {
+//     instanceNormal()
+//       .post(url, config)
+//       .then(data => {
+//         resolve(data.data);
+//       })
+//       .catch(err => {
+//         reject(err);
+//       });
+//   });
+// };
+// const _delete = (url, config) => {
+//   return new Promise((resolve, reject) => {
+//     instanceNormal()
+//       .delete(url, config)
+//       .then(data => {
+//         resolve(data.data);
+//       })
+//       .catch(err => {
+//         reject(err);
+//       });
+//   });
+// };
+// const _put = (url, config) => {
+//   return new Promise((resolve, reject) => {
+//     instanceNormal()
+//       .put(url, config)
+//       .then(data => {
+//         resolve(data.data);
+//       })
+//       .catch(err => {
+//         reject(err);
+//       });
+//   });
+// };
+
+// export default {
+//   _get,
+//   _post,
+//   _delete,
+//   _put
+// };
+/* eslint-disable */
+import axios from 'axios';
+
+// Full config:  https://github.com/axios/axios#request-config
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+const config = {
+  baseURL: 'http://localhost:8080',
+  // timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      return Promise.reject({message:'未登录', hidden: true});
+    }
+    // config.headers.Authorization = localStorage.getItem('token');
+    return config;
+  },
+  (error) =>
+    // Do something with request error
+    Promise.reject(error),
+);
+
+// Add a response interceptor
+// _axios.interceptors.response.use(
+//   (response) => {
+//     if (response.status === 403) {
+//       destroyToken();
+//       window.location.href = '/';
+//       return;
+//     }
+//     if (response.data.code >= 500) {
+//       ElMessage({
+//         type: 'error',
+//         showClose: true,
+//         message: '接口出错，错误信息：' + response.data.msg,
+//       })
+//       return;
+//     }
+//     return response.data.data;
+//   },
+//   (error) => {
+//     // Do something with response error
+//     if (!error.hidden) {
+//       ElMessage({
+//         type: 'error',
+//         showClose: true,
+//         message: '接口出错，错误信息：' + error.message
+//       })
+//     }
+//     Promise.reject(error)
+//   }
+// );
+
+export default _axios;

src/views/DeploymentManage.vue

@@ -1,44 +1,30 @@
 <template>
   <div>
     <div class="title">部署管理</div>
-    <div v-for="item in fake" :key="item.id" @click="to(item.id)" style="cursor: crosshair">{{item.title}}</div>
   </div>
 </template>
 
 <script>
+import { getTotalDeployments } from '@/api/deployment'
 export default {
   name: 'DeploymentManage',
   data() {
-    return {
-      fake: [
-        {
-          id: 1,
-          title: 'zxr',
-        },
-        {
-          id: 2,
-          title: 'yzh',
-        },
-        {
-          id: 3,
-          title: 'wj',
-        },
-        {
-          id: 4,
-          title: 'zh',
-        }
-      ]
+    return {}
+  },
+  mounted() {
+    const config = {
+      params: {
+        pageSize: 20
+      }
     }
+    getTotalDeployments(config).then(res => {
+      console.log(res);
+    })
+    .catch(err => {
+      console.log(err);
+    })
   },
   methods: {
-    to(id) {
-      this.$router.push({
-        path: '/deploymentDetail',
-        query: {
-          id: id
-        }
-      })
-    }
   }
 }
 </script>

vue.config.js

@@ -1,4 +1,14 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true
-})
+module.exports = {
+  devServer: {
+    port: 3000,
+    proxy: {
+      '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          pathRewrite: {
+              "^/api": "" // rewrite path
+          }
+      }
+    }
+  }
+}