解释动态路由的原理

ve-admin/admin-web/src/permission.js

 /*
  * @Author: 一日看尽长安花
  * @since: 2019-09-04 20:55:14
- * @LastEditTime: 2020-06-07 14:12:42
+ * @LastEditTime: 2021-11-28 22:34:16
  * @LastEditors: 一日看尽长安花
  * @Description:
  */
@@ -39,6 +39,7 @@ router.beforeEach(async (to, from, next) => {
         next();
       } else {
         try {
+          // todo 其实不应该这样写的。
           // get user info
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
           const { roles } = await store.dispatch('user/getInfo');

ve-admin/admin-web/src/store/modules/permission.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-09 12:16:28
- * @LastEditTime: 2020-05-07 15:14:43
+ * @LastEditTime: 2021-11-28 23:50:11
  * @LastEditors: 一日看尽长安花
  */
 import { constantRoutes } from '@/router';
@@ -90,8 +90,14 @@ export function handleComponent(routes) {
          * component = resolve => require([`@/views/modules/${URL}`], resolve)；
          * component = () => import(`@/${_route.component}`);
          */
-        //这一步多余的赋值遍历必须存在，import的bug
-        //无法直接使用模板字符
+        // 这一步多余的赋值遍历必须存在，import的bug
+        // 无法直接使用模板字符，同时必须使用模板字符的形式才行，
+        // 因为只有模板字符才会被静态解析。
+        // 两种写法的本质是一样的，因为import 目前来说都被转成require了。
+        // 原理：懒加载是在编译时期的静态分析生成的一个匿名的map 名称映射表
+        // 例如：`@/views/${sub_path}` 这个模板字符表示把 ./views 目录下的所有文件生成一个搜索方法：
+        // function ./src lazy recursive ^\.\/views.*$ ();
+        // 内部就是views目录下的文件映射表
         const name = _route.component;
         _route.component = () => import(`@/${name}`);
       }

ve-admin/admin-web/src/utils/request.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-09 12:16:28
- * @LastEditTime: 2020-03-27 20:23:38
+ * @LastEditTime: 2021-11-27 11:04:49
  * @LastEditors: 一日看尽长安花
  */
 import axios from 'axios';
@@ -153,12 +153,21 @@ service.interceptors.response.use(
     }
   },
   error => {
-    console.log('response err ==> ' + error); // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    });
+    console.log('response err ==> ' + error);
+    if (error.response.status === 401) {
+      Message({
+        message: '请重新登陆',
+        type: 'error',
+        duration: 5 * 1000
+      });
+    } else {
+      Message({
+        message: error.message,
+        type: 'error',
+        duration: 5 * 1000
+      });
+    }
+
     return Promise.reject(error);
   }
 );