云e办前端学习（四）路由守卫

前言

本系列博客基于B站的云e办管理系统，前端和后端我都自己敲了一遍，这里做一个学习记录。云e办的原始视频链接如下：https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1

---

main.js页面编写

进行菜单初始化逻辑处理

// 前置全局路由守卫
// to：去往的路由|from：访问的上一个路由|next：用来真正的跳转页面。没有就不能进行
//如果缓存中有用户token，加载菜单，否则不加载
router.beforeEach((to, from, next) => {
    if (window.sessionStorage.getItem('tokenStr')) {
        initMenu(router, store);
        if (!window.sessionStorage.getItem('user')) {
            //  判断用户信息是否存在
            return getRequest('/admin/info').then(resp => {
                if (resp) {
                    window.sessionStorage.setItem('user', JSON.stringify(resp));
                    // this.$store.commit('INIT_ADMIN', resp);
                    store.commit("INIT_ADMIN", resp);
                    next();
                }
            });
        }
        next();
    } else {
        if (to.path == '/') {
            next();
        } else {
            next('/?redirect=' + to.path)
        }
    }
})