feat: 请求处理

package.json

@@ -25,7 +25,6 @@
     "date-fns": "^2.14.0",
     "enquire.js": "^2.1.6",
     "highlight.js": "^10.2.1",
-    "js-cookie": "^2.2.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.2",

src/components/table/index.vue

@@ -5,7 +5,7 @@
                 <slot name="search" :query="queryForm" />
             </a-form-model>
 
-            <div class="tw-text-right">
+            <div class="tw-text-right tw-mt-2">
                 <a-space>
                     <a-button @click="queryForm = {}">重置</a-button>
                     <a-button type="primary" @click="getData">查询</a-button>
@@ -44,7 +44,6 @@
 
 <script>
 import { request, METHOD } from '@/utils/requestUtil';
-import BASE_URL from '@/utils/baseUrlUtil';
 
 const data = [
     {
@@ -101,8 +100,8 @@ export default {
                 this.data = data;
                 this.loading = false;
             }, 1000);
-            // const res = await request(`${BASE_URL}/${this.url}`, METHOD.GET);
-            // console.log(res);
+            const res = await request(this.url, METHOD.GET);
+            console.log(res);
         },
         add() {
             this.addVisible = true;
@@ -116,6 +115,6 @@ export default {
 
 <style module>
 .card {
-    @apply tw-bg-white tw-rounded-md tw-p-2.5;
+    @apply tw-bg-white tw-rounded-md tw-p-4;
 }
 </style>

src/main.js

@@ -48,8 +48,6 @@ const i18n = new VueI18n({
     silentFallbackWarn: true,
 });
 
-
-
 //装载antd控件
 Vue.use(Antd);
 //装载Viser；
@@ -75,7 +73,7 @@ loadGuards(guards, { router, store, i18n, message: Vue.prototype.$message });
 //     },
 // });
 
-loadResponseInterceptor();
+loadResponseInterceptor({ router });
 
 new Vue({
     router,

src/pages/frame/view/login/Login.vue

@@ -78,7 +78,7 @@
 <script>
 import CommonLayout from '@/pages/frame/layouts/CommonLayout';
 import { login } from '@/pages/frame/services/accountService';
-import { setToken } from '@/utils/requestUtil';
+import { setToken, clearToken } from '@/utils/requestUtil';
 import { loadRoutes } from '@/utils/routerUtil';
 import { mapMutations } from 'vuex';
 import loginI18n from './i18n';
@@ -93,6 +93,9 @@ export default {
             form: this.$form.createForm(this),
         };
     },
+    created() {
+        clearToken();
+    },
     computed: {
         applicationName() {
             return this.$store.state.settingModule.systemName;
@@ -117,6 +120,7 @@ export default {
         afterLogin(result) {
             this.logging = false;
             const { token, userId } = result;
+            console.log(token);
             setToken(token);
             this.$router.replace('/dashboard/workbench');
 

src/pages/system/view/menu/MenuManagement.vue

 <template>
-  <h1>Menu Management</h1>
+    <my-table url="/api/v1/menus" addBtn="addBtn">
+        <template #search="{query}">
+            <a-form-model-item label="菜单、目录名称">
+                <a-input v-model="query.name" />
+            </a-form-model-item>
+        </template>
+        <template #add>
+            <a-input v-model="add.name" />
+        </template>
+        <a-table-column title="姓名" data-index="name" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <span>
+                    <a> {{ row }}</a>
+                    <a-divider type="vertical" />
+                    <a>Delete</a>
+                </span>
+            </template>
+        </a-table-column>
+    </my-table>
 </template>
- 
\ No newline at end of file
+
+<script>
+export default {
+    data: () => ({
+        add: {},
+        addBtn: { text: '新建', title: '菜单配置' },
+    }),
+};
+</script>

src/router/interceptors.js

-import Cookie from 'js-cookie'
 // 401拦截
 const resp401 = {
-  /**
-   * 响应数据之前做点什么
-   * @param response 响应对象
-   * @param options 应用配置 包含: {router, i18n, store, message}
-   * @returns {*}
-   */
-  onFulfilled(response, options) {
-    const {message} = options
-    if (response.code === 401) {
-      message.error('无此权限')
-    }
-    return response
-  },
-  /**
-   * 响应出错时执行
-   * @param error 错误对象
-   * @param options 应用配置 包含: {router, i18n, store, message}
-   * @returns {Promise<never>}
-   */
-  onRejected(error, options) {
-    const {message} = options
-    const {response} = error
-    if (response.status === 401) {
-      message.error('无此权限')
-    }
-    return Promise.reject(error)
-  }
-}
+    /**
+     * 响应数据之前做点什么
+     * @param response 响应对象
+     * @param options 应用配置 包含: {router, i18n, store, message}
+     * @returns {*}
+     */
+    onFulfilled(response, options) {
+        const { message } = options;
+        if (response.code === 401) {
+            message.error('无此权限');
+        }
+        return response;
+    },
+    /**
+     * 响应出错时执行
+     * @param error 错误对象
+     * @param options 应用配置 包含: {router, i18n, store, message}
+     * @returns {Promise<never>}
+     */
+    onRejected(error, options) {
+        const { message } = options;
+        const { response } = error;
+        if (response.status === 401) {
+            message.error('无此权限');
+        }
+        return Promise.reject(error);
+    },
+};
 
 const resp403 = {
-  onFulfilled(response, options) {
-    const {message} = options
-    if (response.code === 403) {
-      message.error('请求被拒绝')
-    }
-    return response
-  },
-  onRejected(error, options) {
-    const {message} = options
-    const {response} = error
-    if (response.status === 403) {
-      message.error('请求被拒绝')
-    }
-    return Promise.reject(error)
-  }
-}
+    onFulfilled(response, options) {
+        const { message } = options;
+        if (response.code === 403) {
+            message.error('请求被拒绝');
+        }
+        return response;
+    },
+    onRejected(error, options) {
+        const { message } = options;
+        const { response } = error;
+        if (response.status === 403) {
+            message.error('请求被拒绝');
+        }
+        return Promise.reject(error);
+    },
+};
 
 const reqCommon = {
-  /**
-   * 发送请求之前做些什么
-   * @param config axios config
-   * @param options 应用配置 包含: {router, i18n, store, message}
-   * @returns {*}
-   */
-  onFulfilled(config, options) {
-    const {message} = options
-    const {url, xsrfCookieName} = config
-    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
-      message.warning('认证 token 已过期，请重新登录')
-    }
-    return config
-  },
-  /**
-   * 请求出错时做点什么
-   * @param error 错误对象
-   * @param options 应用配置 包含: {router, i18n, store, message}
-   * @returns {Promise<never>}
-   */
-  onRejected(error, options) {
-    const {message} = options
-    message.error(error.message)
-    return Promise.reject(error)
-  }
-}
+    /**
+     * 发送请求之前做些什么
+     * @param config axios config
+     * @param options 应用配置 包含: {router, i18n, store, message}
+     * @returns {*}
+     */
+    onFulfilled(config, options) {
+        const { message } = options;
+        const { url, xsrfCookieName } = config;
+        if (url.indexOf('login') === -1 && xsrfCookieName) {
+            message.warning('认证 token 已过期，请重新登录');
+        }
+        return config;
+    },
+    /**
+     * 请求出错时做点什么
+     * @param error 错误对象
+     * @param options 应用配置 包含: {router, i18n, store, message}
+     * @returns {Promise<never>}
+     */
+    onRejected(error, options) {
+        const { message } = options;
+        message.error(error.message);
+        return Promise.reject(error);
+    },
+};
 
 export default {
-  request: [reqCommon], // 请求拦截
-  response: [resp401, resp403] // 响应拦截
-}
+    request: [reqCommon], // 请求拦截
+    response: [resp401, resp403], // 响应拦截
+};

src/utils/requestUtil.js

@@ -14,9 +14,10 @@ axios.defaults.xsrfCookieName = xsrfHeaderName;
 /**
  * @param {*} info 提示函数
  */
-function loadResponseInterceptor() {
+function loadResponseInterceptor({ router }) {
     axios.interceptors.request.use(
         function(config) {
+            console.log(getToken(), config);
             // 在发送请求之前做些什么
             config.headers = {
                 ...config.headers,
@@ -40,10 +41,15 @@ function loadResponseInterceptor() {
             if (data.code === 'sys.success') {
                 return data.data;
             }
+
+            if (data.code === 'error.system.authc') {
+                router.push('/login');
+            }
             notification.error({
                 message: data.code,
                 description: h => h('pre', data.message),
             });
+
             return Promise.reject(data.message);
         },
         function(error) {
@@ -58,14 +64,6 @@ function loadResponseInterceptor() {
     );
 }
 
-// 认证类型
-const AUTH_TYPE = {
-    BEARER: 'Bearer',
-    BASIC: 'basic',
-    AUTH1: 'auth1',
-    AUTH2: 'auth2',
-};
-
 // http method
 const METHOD = {
     GET: 'get',
@@ -136,13 +134,4 @@ function checkAuthorization() {
     return !!getToken();
 }
 
-export {
-    METHOD,
-    AUTH_TYPE,
-    request,
-    parseUrlParams,
-    loadResponseInterceptor,
-    setToken,
-    checkAuthorization,
-    clearToken,
-};
+export { METHOD, request, parseUrlParams, loadResponseInterceptor, setToken, checkAuthorization, clearToken };

vue.config.js

@@ -177,7 +177,6 @@ const assetsCDN = {
         nprogress: 'NProgress',
         clipboard: 'ClipboardJS',
         '@antv/data-set': 'DataSet',
-        'js-cookie': 'Cookies',
     },
     css: [],
     js: [
@@ -188,7 +187,6 @@ const assetsCDN = {
         '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',
         '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',
         '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',
-        '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js',
     ],
 };