修复当token不存在的时候请求接口ui报错

Author: kuangshp

src/components/app-header/AppHeader.vue

@@ -42,7 +42,7 @@ import {
   Mutation,
   namespace,
 } from 'vuex-class';
-import { OperatedProduct } from '@/config';
+import { currentUser, authToken } from '@/config';
 import { storage } from '@/utils';
 import { IViewState } from '@/store/view';
 
@@ -55,12 +55,13 @@ export default class AppHeader extends Vue {
   private username: string = '';
 
   private logout(): void {
-    storage.removeItem(OperatedProduct);
+    storage.removeItem(authToken);
+    storage.removeItem(currentUser);
     this.$router.push({ name: 'login' });
   }
 
   private mounted() {
-    this.username = storage.getItem(OperatedProduct);
+    this.username = storage.getItem(currentUser);
   }
 }
 </script>

src/config/index.ts

@@ -4,3 +4,4 @@ export const authToken: string = 'token';
 export const OperatedProduct = 'X-Operated-Product';
 export const authMobile: string = '';
 export const authEmail: string = 'auth-email';
+export const currentUser: string = 'current-user';

src/store/modules/user.ts

@@ -11,7 +11,7 @@ export default {
         const { code, message, result } = await UserService.getAllUser();
         return axiosResult(result, code, message, true);
       } catch (e) {
-        console.error(e);
+        return e;
       }
     },
   },

src/utils/auth.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { OperatedProduct } from '@/config';
+import { authToken } from '@/config';
 import { storage } from './storage';
 
 export const auth = (
@@ -8,7 +8,7 @@ export const auth = (
   next: (arg0: { name: string; query: { backUrl: any } }) => void,
 ) => {
   // 如果是要授权登录的且当前本地存储中不存在用户邮箱的跳转到登录页面
-  if (!to.meta.unauth && !storage.getItem(OperatedProduct)) {
+  if (!to.meta.unauth && !storage.getItem(authToken)) {
     Vue.prototype.$notify({
       title: '退出提示',
       message: '登录超时',

src/utils/axios-request.ts

@@ -6,7 +6,7 @@
  * @Company:
  * @Date: 2019-08-16 16:57:42
  * @LastEditors: 水痕
- * @LastEditTime: 2019-08-21 12:23:41
+ * @LastEditTime: 2019-08-21 16:23:28
  */
 
 import axios from 'axios';
@@ -32,6 +32,10 @@ class AxiosRequest {
     );
   }
 
+  /**
+   * 成功请求的方法
+   * @param config
+   */
   private request(config: { [propsName: string]: any }) {
     // 配置请求头
     config.headers['X-Origin'] = 'admin-web';
@@ -49,18 +53,35 @@ class AxiosRequest {
     return config;
   }
 
+  /**
+   * 失败请求的方法
+   * @param rejection
+   */
   private requestError(rejection: { data: any }) {
     return this.useOrigin(rejection)
       ? Promise.reject(rejection)
       : Promise.reject(rejection.data);
   }
 
-  private response(res: any) {
-    return this.isPlainRequest(res.config.url) || this.useOrigin(res)
-      ? res
-      : res.data;
+  /**
+   * 成功响应的方法
+   * @param response
+   */
+  private response(response: any) {
+    if (response.status === 200 || response.status === 201) {
+      return this.isPlainRequest(response.config.url) ||
+        this.useOrigin(response)
+        ? Promise.resolve(response)
+        : Promise.resolve(response.data);
+    } else {
+      return Promise.reject(response);
+    }
   }
 
+  /**
+   * 响应失败的方法(根据自己的业务逻辑写)
+   * @param error
+   */
   private responseError(error: any) {
     if (error.response && error.response.status) {
       let $path;
@@ -82,6 +103,7 @@ class AxiosRequest {
         // 未登录则跳转登录页面，并携带当前页面的路径
         // 在登录成功后返回当前页面，这一步需要在登录页操作。
         case 401:
+          console.log('你没有登录,请先登录');
           routers.replace({
             path: '/login',
             query: {

src/views/shared/login/Login.vue

@@ -44,7 +44,7 @@
 
 <script lang="ts">
 import { Component, Vue, Provide } from 'vue-property-decorator';
-import { authToken } from '@/config';
+import { authToken, currentUser } from '@/config';
 import { storage } from '@/utils';
 import axios from 'axios';
 
@@ -62,6 +62,7 @@ export default class Login extends Vue {
         if (code === 0) {
           // 设置本地存储
           storage.setItem(authToken, token);
+          storage.setItem(currentUser, this.loginForm.email);
           if (this.$route.query.backUrl) {
             this.$router.push((this.$route.query as any).backUrl);
           } else {