token

src/App.vue

@@ -7,15 +7,18 @@
 </template>
 
 <script>
+  import Vue from 'vue'
   import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
-  import { AppDeviceEnquire } from '@/utils/mixin';
-  import { sendUserCodeAndCorpId } from '@/api/user';
+  import {AppDeviceEnquire} from '@/utils/mixin';
+  import {sendUserCodeAndCorpId, getToken} from '@/api/user';
 
   function GetQueryString(name) {
     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
     var r = window.location.search.substr(1).match(reg); // 获取url中"?"符后的字符串并正则匹配
     var context = '';
-    if (r != null) { context = r[2]; }
+    if (r != null) {
+      context = r[2];
+    }
     reg = null;
     r = null;
     return context == null || context === '' || context === 'undefined' ? '' : context;
@@ -29,29 +32,56 @@
       };
     },
     methods: {
-      getUserInfoFromServer() {
-        const userCode = GetQueryString('userCode');
-        const corpId = GetQueryString('corpId');
-        // const userId = GetQueryString('userId');
-        this.$ls.set('corpId', corpId)
-        // this.$ls.set('userId', userId)
-        console.log(userCode, corpId);
-        const data = {
-          code: userCode, corpId
-        };
-        return sendUserCodeAndCorpId(data).then(res => {
-          if (res.code === 'M0000') {
-            const userId = res.data.corpUsers[0].id;
-            this.$ls.set('userId', userId)
-            alert(userId);
-          } else {
-            alert('获取失败');
-          }
-        });
-      }
+      // getUserInfoFromServer() {
+      //   const userCode = GetQueryString('userCode');
+      //   const corpId = GetQueryString('corpId');
+      //   // const userId = GetQueryString('userId');
+      //   this.$ls.set('corpId', corpId)
+      //   // this.$ls.set('userId', userId)
+      //   console.log(userCode, corpId);
+      //   const data = {
+      //     code: userCode
+      //   };
+      //    getToken(data).then((res) => {
+      //     this.$ls.set('accessToken', res.data.access_token)
+      //   })
+      //   return sendUserCodeAndCorpId(data).then(res => {
+      //     if (res.code === 'M0000') {
+      //       const userId = res.data.corpUsers[0].id;
+      //       this.$ls.set('userId', userId)
+      //       alert(userId);
+      //     } else {
+      //       alert('获取失败');
+      //     }
+      //   });
+      // }
     },
     async mounted() {
       await this.getUserInfoFromServer();
+      const userCode = GetQueryString("userCode")
+      const corpId = GetQueryString("corpId")
+      Vue.ls.setItem('corpId',corpId)
+      console.log(userCode, corpId);
+      const data = {
+        code: userCode
+      }
+      //获取
+      await axios.get('/api/oauth/getTokenByCode',{params:data,headers: {'clientType': 'app'}}).then(res=>{
+        Vue.ls.set('accessToken', res.data.access_token)
+      })
+      await sendUserCodeAndCorpId(data).then(res => {
+        if (res.code === 'M0000') {
+          const userId = res.data.corpUsers[0].id
+          const accessToken = res.data.access_token
+          const refreshToken = res.data.refresh_token
+          Vue.ls.set('userId', userId)
+          Vue.ls.set('accessToken', accessToken)
+          Vue.ls.set('refreshToken', refreshToken)
+          alert(userId)
+        } else {
+          alert('获取失败')
+        }
+      })
     }
   };
 </script>

src/utils/request.js

-import Vue from 'vue'
-import axios from 'axios'
-import store from '@/store'
+import Vue from 'vue';
+import axios from 'axios';
+import store from '@/store';
 import {
   VueAxios
-} from './axios'
-import notification from 'ant-design-vue/es/notification'
+} from './axios';
+import notification from 'ant-design-vue/es/notification';
 import {
   ACCESS_TOKEN
-} from '@/store/mutation-types'
+} from '@/store/mutation-types';
 
 // 创建 axios 实例
 const service = axios.create({
   // baseURL: 'http://106.2.13.200:8032', // api base_url
-  baseURL: 'http://192.168.9.23:8080', // api base_url
+  baseURL: 'api/task/v1', // api base_url
   timeout: 6000 // 请求超时时间
-})
+});
+
+// 刷新token的请求方法
+function getRefreshToken() {
+  const params = {
+    refreshToken: this.$ls.getItem('refreshToken')
+  };
+  return axios.get('http://192.168.5.41/api/task/v1/task/tb-user/refreshToken', { params, headers: { 'clientType': 'app' } });
+}
 
 const err = (error) => {
   if (error.response) {
-    const data = error.response.data
-    const token = Vue.ls.get(ACCESS_TOKEN)
-    if (error.response.status === 403) {
-      notification.error({
-        message: 'Forbidden',
-        description: data.msg
-      })
-    }
-    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
-      notification.error({
-        message: 'Unauthorized',
-        description: 'Authorization verification failed'
-      })
-      if (token) {
-        store.dispatch('Logout').then(() => {
-          setTimeout(() => {
-            window.location.reload()
-          }, 1500)
-        })
-      }
-    }
+    // const data = error.response.data
+    // const token = Vue.ls.get(ACCESS_TOKEN)
+    // if (error.response.status === 403) {
+    //   notification.error({
+    //     message: 'Forbidden',
+    //     description: data.msg
+    //   })
+    // }
+    // if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
+    //   notification.error({
+    //     message: 'Unauthorized',
+    //     description: 'Authorization verification failed'
+    //   })
+    //   if (token) {
+    //     store.dispatch('Logout').then(() => {
+    //       setTimeout(() => {
+    //         window.location.reload()
+    //       }, 1500)
+    //     })
+    //   }
   }
-  return Promise.reject(error)
-}
+  return Promise.reject(error);
+};
 
 // request interceptor
 service.interceptors.request.use(config => {
-  const token = Vue.ls.get(ACCESS_TOKEN)
-  if (token) {
-    config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+  // const token = Vue.ls.get(ACCESS_TOKEN)
+  // if (token) {
+  //   config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+  // }
+  config.headers['clientType'] = 'app';
+  // 如果不为空的话就设置 因为一开始获取token的接口是没有的
+  if (Vue.ls.getItem('accessToken') != '' && Vue.ls.getItem('accessToken') != undefined) {
+    config.headers['Authorization'] = 'Bearer ' + Vue.ls.getItem('accessToken');
   }
-  return config
-}, err)
+  return config;
+}, err);
 
 // response interceptor
 service.interceptors.response.use((response) => {
-  return response.data
-}, err)
+  const resConfig = response.config;
+  console.log(resConfig);
+  const res = response.data;
+  if (res.code == 'G_T_001') {
+    console.log('refresh');
+    return getRefreshToken()
+      .then((res) => {
+        const data = res.data;
+        console.log(data);
+        console.log('重新请求');
+        Vue.ls.set('accessToken', data.access_token);
+        Vue.ls.set('refreshToken', data.refresh_token);
+        resConfig.headers['Authorization'] = 'Bearer ' + Vue.ls.get('refreshToken');
+        return axios(resConfig);
+      });
+  }
+  return res;
+}, err);
 
 const installer = {
   vm: {},
-  install (Vue) {
-    Vue.use(VueAxios, service)
+  install(Vue) {
+    Vue.use(VueAxios, service);
   }
-}
+};
 
 export {
   installer as VueAxios,
   service as axios
-}
+};

vue.config.js

-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const webpack = require('webpack');
 
-function resolve (dir) {
-  return path.join(__dirname, dir)
+function resolve(dir) {
+  return path.join(__dirname, dir);
 }
 
 // vue.config.js
 module.exports = {
+
   /*
     Vue-cli3:
     Crashed when using Webpack `import()` #2463
@@ -21,7 +22,9 @@ module.exports = {
     }
   },
   */
-  publicPath: "./",
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/zx-task-manager'
+    : '/',
   configureWebpack: {
     module: {
       rules: [
@@ -55,10 +58,10 @@ module.exports = {
       .set('@comp', resolve('src/components'))
       .set('@views', resolve('src/views'))
       .set('@layout', resolve('src/layout'))
-      .set('@static', resolve('src/static'))
+      .set('@static', resolve('src/static'));
 
-    const svgRule = config.module.rule('svg')
-    svgRule.uses.clear()
+    const svgRule = config.module.rule('svg');
+    svgRule.uses.clear();
     svgRule
       .oneOf('inline')
       .resourceQuery(/inline/)
@@ -71,7 +74,7 @@ module.exports = {
       .loader('file-loader')
       .options({
         name: 'assets/[name].[hash:8].[ext]'
-      })
+      });
     /* svgRule.oneOf('inline')
       .resourceQuery(/inline/)
       .use('vue-svg-loader')
@@ -107,6 +110,16 @@ module.exports = {
   devServer: {
     // development server port 8000
     port: 8000,
+    proxy: {
+      '/api': {
+        target: 'http://192.168.5.41',
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': '/api'
+        }
+      }
+    }
     // host: '192.168.1.108',
     // disableHostCheck: true
     // proxy: {
@@ -124,4 +137,4 @@ module.exports = {
   lintOnSave: undefined,
   // babel-loader no-ignore node_modules/*
   transpileDependencies: []
-}
+};