fancy-loop

0. 循环

while, for 是循环，废品回收当然也是循环。（内容自由 & 形式自由）

Property "xxx" must be accessed with...

前几周实际开发（裁缝）过程中遇到的问题。

这大概是个什么意思呢，就是代码里面有个地方在报错，至于报错的原因，则是：

1	Message.error(error \|\| "Has Error");

裁缝的是 vue-element-admin 的这个地方。

但是由于这次传入的错误，并非源代码中所期望的数据类型，从而应该使用：

1
2
3

Message.error({
    message: error || "Has Error"
})

排开这一个地方出错就报 10 个错的地方不谈，那么 Console 中便没有其他的 warning & error 了。

但是我一开始 并不知道这一点 ！

由于 error 出现在 user.js 的后面，我第一想到的是 user.js 里面出了问题，尤其是 getInfo。

// /src/store/modules/user.js
getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
        const JWT = getToken("JWT");
        const id = getToken("id");
        const data = {
            id: id, JWT: JWT,
            // balabala
        };
        commit("SET_ID", data.id);
        commit("SET_TOKEN", data.JWT);
        // balabala

        console.log("resolve");
        console.log(commit, state, data.JWT)
        resolve(data);
    })
}

很抱歉我没有看出任何有问题的地方。

聪明的我也立刻发觉自己是个 sb，接下来应该看调用这个 action 的那层：

const { id } = await store.dispatch("user/getInfo");
const accessRoutes = await store.dispatch(
    "permission/generateRoutes",
    id
);
router.addRoutes(accessRoutes);
next({ ...to, replace: true });

很抱歉我还是没有看出哪里会导致循环。尽管如此，我是知道 permission/generateRoutes 里面肯定是有问题的。

这次做的比较大的改动，就是把源代码中用 root 来区别路由权限的部分，全部换成了 identity，虽然看起来改个变量名就行了，但是无论从数据类型、含义、使用范围，都变得不一样了。因此问题还是有的。

由于我实在看不出 /src/store/modules/permission.js 这个文件到底有什么问题，debug 一时间陷入了困境，这一困就是两周……

当然我承认，中途我划水划得有点厉害，但是每天打开编辑器，看到这百行左右的代码找不出来 bug，重启的心都有了。

1. try-catch

在一位学长的帮助下，可算定位了这个问题。

问题的确出在 /src/store/modules/permission.js 文件中，这个可以参考这里，反正就这三个函数，差不多的。

死循环是可能出现在路由处理方面的。由于 vue-router 这个强大的插件提供嵌套路由管理功能，也就是父子路由。那么在使用 router.addRoutes 添加定义的路由时，就应在此之前完成一个递归操作。

而递归操作写不好，就死循环了…

这也是我一直怀疑的地方，我一直认为自己哪里改改错了，但是在和源代码对比之后，也没有发现自己太离谱的地方，也没发现可以导致死循环的地方。

至少我觉得我的那几个 if 没啥问题。

刚才只展示了一部分代码，实际上却是这样的：

// /src/permission.js
try {
    const { id } = await store.dispatch("user/getInfo");
    const accessRoutes = await store.dispatch(
        "permission/generateRoutes",
        id
    );
    router.addRoutes(accessRoutes);
    next({ ...to, replace: true });
} catch(error) {
    await store.dispatch("user/resetToken");
    Message.error(error || "Has Token");
    next(`/login?redirect=${to.path}`);
    NProgress.done();
}

试想，如果 try 里面出了问题，那不就到了 catch 执行代码吗…

智商本就不太高的我万万没有考虑到这一点。但是执行 catch 块中代码又怎样呢？这里面除了刚才提到能一口气爆 10 个 error 的 Message.error 之外，也没有什么奇怪的。

2. next

问题到底出在哪里，还是看不出来，这需要再往外看一层：

// /src/permission.js
router.beforeEach(async(to, from, next) => {
    // balbala
    try {
        const { id } = await store.dispatch("user/getInfo");
        const accessRoutes = await store.dispatch(
            "permission/generateRoutes",
            id
        );
        router.addRoutes(accessRoutes);
        next({ ...to, replace: true });
    } catch(error) {
        await store.dispatch("user/resetToken");
        Message.error(error || "Has Token");
        next(`/login?redirect=${to.path}`);
        NProgress.done();
    }
    // balabala
})