Vue3商店后台管理系统设计文稿篇（八）

---

正文内容

一、Vue3路由守卫全局前置守卫

使用场景对于管理系统而言进入管理系统前都应该验证用户是否登录如果用户没有登录则跳转到登录页面进行登录操作如果用户已经登录则跳转到正常的管理页面

逻辑分析系统页面加载的时候先通过全局前置守卫进行判断用户是否登录之后再进行页面跳转

具体实现前面文章已经介绍Vuex相关知识现在使用store进行存储用户登录相关的信息全局前置守卫通过store中存储的用户信息判断用户是否登录如果用户信息存在则页面正常跳转否则页面跳转到登录页面

代码如下所示

// 创建全局前置路由守卫
router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from当前导航正要离开的路由
  // next调用该方法来 resolve这个钩子

  const uInfo = store.state.uInfo.userInfo;
  if (!uInfo.account) {
    if (to.path === "/login") {
      next();
      return;
    }
    next("/login");
  } else {
    next();
  }
});

存在问题store存储的数据在页面刷新之后数据将会重新初始化当点击登录按钮之后会生成store的数据这个操作一共进行一次所以页面刷新之后页面将会跳转到登录页面
解决问题初始化store数据的时候使用localStorage进行存储登录数据store的默认初始化地方读取localStorage数据

设置默认初始化的代码如下

state: {
    userInfo:
      (localStorage.getItem("loginData") && JSON.parse(localStorage.getItem("loginData"))) || {},
  },

二、项目完整代码

项目完整代码已经上传到github地址如下

https://github.com/crazymen-nanke/shop