Comment charger le menu dynamique dans Vue3

1. Idée générale

Tout d'abord, examinons l'idée générale de mise en œuvre Tout d'abord : L'idée générale est exactement la même que celle de vhr.

Considérant que certains amis ont peut-être oublié l'idée d'implémentation du menu dynamique front-end en vhr, cet article l'analysera avec vous.

Afin de garantir que les données du menu soient accessibles dans tous les fichiers .vue, nous choisissons de stocker les données du menu dans vuex, qui est un stockage de données dans vue. Dans les lieux publics, tous les fichiers .vue peuvent lire les données de vuex. Les données stockées dans vuex sont essentiellement stockées en mémoire, elles ont donc la particularité qu'après que le navigateur appuie sur F5 pour actualiser, les données disparaissent. Ainsi, lorsqu'un saut de page se produit, nous devons distinguer si le saut de page se produit après que l'utilisateur a cliqué sur le bouton de menu de la page ou si le saut de page se produit après que l'utilisateur a cliqué sur le bouton d'actualisation du navigateur (ou appuyé sur F5). .vue 文件中都能访问到到菜单数据，所以选择将菜单数据存入 vuex 中，vuex 是 vue 中一个存储数据的公共地方，所有的 .vue 文件都可以从 vuex 中读取到数据。存储在 vuex 中的数据本质上是存在内存中，所以它有一个特点，就是浏览器按 F5 刷新之后，数据就没了。所以在发生页面的跳转的时候，我们应该去区分一下，是用户点击了页面上的菜单按钮之后发生了页面跳转还是用户点击了浏览器刷新按钮（或者按了 F5）发生了跳转。

为了实现这一点，我们需要用到 vue 中的路由导航守卫功能，对于我们 Java 工程师而言，这些可能听起来有点陌生，但是你把它当作 Java 中的 Filter 来看待就好理解了，实际上我们视频中和小伙伴们讲解的时候就是这么类比的，将一个新事物跟我们脑海中一个已有的熟悉的事物进行类比，就很容易理解了。

vue 中的导航守卫就类似一个监控，它可以监控到所有的页面跳转，在页面跳转中，我们可以去判断一下 vuex 中的菜单数据是否还在，如果还在，就说明用户是点击了页面上的菜单按钮完成了跳转的，如果不在，就说明用户是点击了浏览器的刷新按钮或者是按了 F5 进行页面刷新的，此时我们就要赶紧去服务端重新加载一下菜单数据。

---xxxxxxxxxxxxxxxxxx---

整体上的实现思路就是这样，接下来我们来看看一些具体的实现细节。

2. 实现细节

2.1 加载细节

首先我们来看看加载的细节。

小伙伴们知道，单页面项目的入口是 main.js，路由加载的内容在 src/permission.js 文件中，该文件在 main.js 中被引入，src/permission.js 中的前置导航守卫内容如下：

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && useSettingsStore().setTitle(to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (useUserStore().roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        useUserStore().getInfo().then(() => {
          isRelogin.show = false
          usePermissionStore().generateRoutes().then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            accessRoutes.forEach(route => {
              if (!isHttp(route.path)) {
                router.addRoute(route) // 动态添加可访问路由表
              }
            })
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          useUserStore().logOut().then(() => {
            ElMessage.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

我跟大家捋一下这个前置导航守卫中的思路：

• 首先调用 getToken 方法，这个方法实际上是去 Cookie 中拿认证 Token，也就是登录成功后后端返回给前端的那个 JWT 字符串。

• 如果 getToken 方法有返回值，说明用户已经登录了，那么进入到 if 分支中，如果 getToken 没拿到值，说明用户未登录，未登录的话，又分为两种情况：i：访问的目标地址处于免登录白名单中，那么此时直接访问即可；ii：访问的目标地址不在白名单中，那么此时就跳转到登录页面去，跳转的时候同时携带一个 redirect 参数，这样方便在登录成功之后，再跳转回访问的目标页面。这个免登录访问的白名单，是一个在 src/permission.js 文件中定义的变量，默认有四个路径，分别是 ['/login', '/auth-redirect', '/bind', '/register']。

• 如果 getToken 拿到了值，说明用户已经登录了，此时又分情况：如果用户访问的路径是登录页面，那么就给他重定向到项目首页（也就是在已经登录的情况下，不允许用户再次访问登录页面）；如果用户访问的路径不是登录页面，那么首先判断 vuex 中的 roles 是否还有值？如果有值，说明当前就是用户点击了一个菜单按钮进行跳转的，那么直接跳转就行了；如果没有值，说明用户是按了浏览器的刷新按钮或者是 F5 按钮刷新进行的页面跳转，那么此时首先调用 getInfo 方法（位于 src/store/modules/user.js 文件中）去服务端重新加载当前用户的基本信息、角色信息以及权限信息，然后再调用 generateRoutes 方法（位于 src/store/modules/permission.js 文件中）去服务端加载路由信息，并将加载到的路由信息放入到 router 对象中（前提是这个路由对象不是一个 http 链接，就是普通的路由地址）。

这就是动态路由的加载整体思路。

在第三步骤中，涉及到两个方法，一个是 getInfo 还有一个 generateRoutes，这两个方法也都比较关键，我们再来稍微看下。

2.2 getInfo

首先这个加载用户信息的方法位于 src/store/modules/user.js

Pour y parvenir, nous devons utiliser la fonction Route Navigation Guard dans vue. Pour nous, ingénieurs Java, cela peut sembler un peu inconnu, mais vous pouvez le traiter comme un filtre en Java. facile à comprendre quand on le regarde. En fait, c'est l'analogie que nous avons utilisée pour l'expliquer à nos amis dans la vidéo. C'est facile à comprendre lorsque nous comparons une chose nouvelle à une chose déjà familière dans notre esprit.

Le garde de navigation dans vue est similaire à un moniteur. Il peut surveiller tous les sauts de page, nous pouvons juger si les données du menu dans vuex sont toujours là. , cela signifie que l'utilisateur a cliqué sur le bouton de menu de la page pour terminer le saut. S'il n'est pas là, cela signifie que l'utilisateur a cliqué sur le bouton d'actualisation du navigateur ou a appuyé sur F5 pour actualiser la page. pour vous dépêcher. Rechargez les données du menu côté serveur. #🎜🎜##🎜🎜#---xxxxxxxxxxxxxxxxxxxxx---#🎜🎜##🎜🎜#L'idée générale de la mise en œuvre est la suivante. Examinons ensuite quelques détails spécifiques de la mise en œuvre. #🎜🎜##🎜🎜#2. Détails de mise en œuvre#🎜🎜#

2.1 Détails de chargement

#🎜🎜#Tout d'abord, jetons un œil aux détails de chargement. #🎜🎜##🎜🎜# Les amis savent que l'entrée d'un projet d'une seule page est main.js, et que le contenu chargé par la route se trouve dans le fichier src/permission.js, qui est dans main.js a été introduit, le contenu du garde de navigation avant dans src/permission.js est le suivant : #🎜🎜#

getInfo() {
  return new Promise((resolve, reject) => {
    getInfo().then(res => {
      const user = res.user
      const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
      if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        this.roles = res.roles
        this.permissions = res.permissions
      } else {
        this.roles = ['ROLE_DEFAULT']
      }
      this.name = user.userName
      this.avatar = avatar;
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })
},

#🎜🎜# Laissez-moi partager avec vous les idées de ce garde de navigation avant : #🎜🎜#

• #🎜🎜#Appelez d'abord la méthode getToken. Cette méthode obtient en fait le jeton d'authentification du cookie, qui est la chaîne JWT que le backend renvoie au frontend après avoir réussi. se connecter. #🎜🎜#
• #🎜🎜#Si la méthode getToken a une valeur de retour, cela signifie que l'utilisateur est connecté, puis entrez la branche if. Si getToken n'obtient pas la valeur, cela signifie que. l'utilisateur n'est pas connecté. S'il n'est pas connecté, cela peut être divisé en deux situations : i : l'adresse cible à laquelle vous accédez se trouve dans la liste blanche sans connexion, vous pouvez y accéder directement ii : l'adresse cible à laquelle vous accédez est ; pas dans la liste blanche, vous passerez alors à la page de connexion. Lors du saut, il comporte également un paramètre de redirection, ce qui facilite le retour à la page cible après une connexion réussie. Cette liste blanche pour un accès sans connexion est une variable définie dans le fichier src/permission.js. Il existe quatre chemins par défaut, à savoir ['/login', '/auth-redirect', '/bind' , '/. s'inscrire']. #🎜🎜#
• #🎜🎜#Si getToken obtient la valeur, cela signifie que l'utilisateur s'est connecté. A ce moment, il existe différentes situations : si le chemin auquel l'utilisateur accède est la page de connexion, puis redirigez-le vers la page d'accueil du projet (c'est-à-dire que si l'utilisateur est déjà connecté, l'utilisateur n'est pas autorisé à accéder à nouveau à la page de connexion si le chemin auquel l'utilisateur accède n'est pas la page de connexion, alors déterminez d'abord si le) ; les rôles dans vuex ont-ils toujours une valeur ? S'il y a une valeur, cela signifie que l'utilisateur a cliqué sur un bouton de menu pour sauter, donc sautez directement ; s'il n'y a pas de valeur, cela signifie que l'utilisateur a appuyé sur le bouton d'actualisation du navigateur ou sur le bouton F5 pour actualiser la page. appelez la méthode getInfo (située dans le fichier src/store/modules/user.js) pour recharger les informations de base, les informations de rôle et les informations d'autorisation de l'utilisateur actuel sur le serveur, puis appelez la méthode generateRoutes (située dans src/store/modules /permission.js) accédez au serveur pour charger les informations de routage et placez les informations de routage chargées dans l'objet routeur (à condition que cet objet de routage ne soit pas un lien http, mais une adresse de routage ordinaire). #🎜🎜#

#🎜🎜#C'est l'idée générale du chargement du routage dynamique. #🎜🎜##🎜🎜#Dans la troisième étape, deux méthodes sont impliquées, l'une est getInfo et l'autre est generateRoutes. Ces deux méthodes sont également relativement critiques. #🎜🎜#

2.2 getInfo

#🎜🎜#Tout d'abord, cette méthode de chargement des informations utilisateur se trouve dans le fichier src/store/modules/user.js. en d'autres termes, les informations de base de ces utilisateurs. Une fois les informations chargées, elles sont stockées dans vuex. Si vous actualisez le navigateur, les données seront perdues : #🎜🎜#

{
    "permissions":[
        "*:*:*"
    ],
    "roles":[
        "admin"
    ],
    "user":
        "userName":"admin",
        "nickName":"TienChin健身",
        "avatar":"",
    }
}

#🎜🎜#La logique de la méthode n'est en fait pas. beaucoup à dire Combiné avec le format JSON renvoyé par le serveur, cela devrait C'est facile à comprendre (partie de JSON) : #🎜🎜#.

{
    "permissions":[
        "*:*:*"
    ],
    "roles":[
        "admin"
    ],
    "user":
        "userName":"admin",
        "nickName":"TienChin健身",
        "avatar":"",
    }
}

另外再强调下，之前在 vhr 中，我们是将请求封装成了一个 api.js 文件，里边有常用的 get、post、put 以及 delete 请求等，然后在需要使用的地方，直接去调用这些方法发送请求即可，但是在 TienChin 中，脚手架的封装是将所有的请求都提前统一封装好，在需要的时候直接调用封装好的方法，连请求地址都不用传递了（封装的时候就已经写死了），所以小伙伴们看上面的 getInfo 方法只有方法调用，没有传递路径参数等。

2.3 generateRoutes

generateRoutes 方法则位于 src/store/modules/permission.js 文件中，这里值得说道的地方就比较多了：

generateRoutes(roles) {
  return new Promise(resolve => {
    // 向后端请求路由数据
    getRouters().then(res => {
      const sdata = JSON.parse(JSON.stringify(res.data))
      const rdata = JSON.parse(JSON.stringify(res.data))
      const defaultData = JSON.parse(JSON.stringify(res.data))
      const sidebarRoutes = filterAsyncRouter(sdata)
      const rewriteRoutes = filterAsyncRouter(rdata, false, true)
      const defaultRoutes = filterAsyncRouter(defaultData)
      const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
      asyncRoutes.forEach(route => { router.addRoute(route) })
      this.setRoutes(rewriteRoutes)
      this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
      this.setDefaultRoutes(sidebarRoutes)
      this.setTopbarRoutes(defaultRoutes)
      resolve(rewriteRoutes)
    })
  })
}

首先大家看到，服务端返回的动态菜单数据解析了三次，分别拿到了三个对象，这三个对象都是将来要用的，只不过使用的场景不同，下面结合页面的显示跟大家细说。

• 首先是调用 filterAsyncRouter 方法，这个方法的核心作用就是将服务端返回的 component 组件动态加载为一个 component 对象。不过这个方法在调用的过程中，后面还有两个参数，第二个是 lastRouter 在该方法中并无实质性作用；第三个参数则主要是说是否需要对 children 的 path 进行重写。小伙伴们知道，服务端返回的动态菜单的 path 属性都是只有一层的，例如一级菜单系统管理的 path 是 system，二级菜单用户管理的 path 则是 user，那么用户管理最终访问的 path 就是 system/path，如果第三个参数为 true，则会进行 path 的重写，将 path 最终设置正确。

• 所以这里的 sidebarRoutes 和 defaultRoutes 只是能用于菜单渲染（因为这两个里边的菜单 path 不对），而最终的页面跳转要通过 rewriteRoutes 才可以实现。

• 除了服务端返回的动态菜单，前端本身也定义了一些基础菜单，前端的基础菜单分为两大类，分别是 constantRoutes 和 dynamicRoutes，其中 constantRoutes 是固定菜单，也就是一些跟用户权限无关的菜单，例如 404 页面、首页等；dynamicRoutes 是动态菜单，也就是也根据用户权限来决定是否展示的菜单，例如分配用户、字典数据、调度日志等等。

• filterDynamicRoutes 方法则是将前端提前定义好的 dynamicRoutes 菜单进行过滤，找出那些符合当前用户权限的菜单将之添加到路由中（这些菜单都不需要在菜单栏渲染出来）。

• 接下来涉及到四个不同的保存路由数据的变量，分别是 routes、addRoutes（经松哥分析，这个变量并无实际作用，可以删除之）、defaultRoutes、topbarRouters 以及 sidebarRouters，四个路由变量的作用各有不同：

routes：

routes 中保存的是 constantRoutes 以及服务端返回的动态路由数据，并且这个动态路由数据中的 path 已经完成了重写，所以这个 routes 主要用在两个地方：

首页的搜索上：首页的搜索也可以按照路径去搜索，所以需要用到这个 routes，如下图：

用在 TagsView，这个地方也需要根据页面渲染不同的菜单，也是用的 routes：

sidebarRouters：

这个就是大家所熟知的侧边栏菜单了，具体展示是 constantRoutes+服务端返回的菜单，不过这些 constantRoutes 基本上 hidden 属性都是 false，渲染的时候是不会被渲染出来的。

topbarRouters：

这个是用在 TopNav 组件中，这个是将系统的一级菜单在头部显示出来的，如下图：

一级菜单在顶部显示，左边显示的都是二级三级菜单，那么顶部菜单的渲染，用的就是这个 topbarRouters。

defaultRoutes：

想要开启顶部菜单，需要在 src/layout/components/Settings/index.vue 组件中设置，如下图：

开启顶部菜单之后，点击顶部菜单，左边菜单栏会跟着切换，此时就是从 defaultRoutes 中遍历出相关的菜单设置给 sidebarRouters。

D'accord, c'est le rôle de ces quatre variables de routes. Pour être honnête, la conception du code dans cette partie de l'échafaudage est un peu déroutante. Il n'est pas nécessaire d'avoir autant de variables pour l'optimiser. pour tout le monde. La méthode

generateRoutes renverra éventuellement la variable rewriteRoutes au garde de navigation avant mentionné précédemment, et enfin le garde de navigation avant ajoutera les données au routeur.

Le rendu du menu est entièrement fait dans src/layout/components/Sidebar/index.vue Après l'avoir regardé, c'est une opération normale. Il n'y a rien à dire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!