vue 管理后台获取菜单和页面刷新先后问题？

  • Z时代
  • 2024-02-06
  • 分类：IT

做一个后台管理系统，一个都有个逻辑：

登录成功——》获取授权的菜单（动态添加到路由里面）——》跳转到需要授权的页面。

但是当我们在 需要授权的页面 刷新页面时候，也会先获取菜单（app.vue mounted里），但是由于获取菜单是异步的，如果服务器很慢，导致菜单还没有获取到，就进入了页面，会因为此时路由未被注册，而进入页面失败，改怎么处理这种问题？

回答：

其实就是要做动态路由对吧, 不应该让用户跳转到未授权的页面呀, 应该做拦截未授权就404, 以及菜单栏没有未授权的页面入口

回答：

现在比较普适的处理方式是在 #app 容器里面放一个 loading 效果。以及只有登录页等公共入口页。router/index.js · vueComponent/ant-design-vue-pro

等 Vue 载入成功之后进入路由守卫进行执行权限判定（还处在 loading 效果），判断本地缓存中是否有 token，如果有则跳转到首页（token 如果过期请求接口会返回登录过期，然后跳转回登录页面）。
如果没有则判断是否有授权，如果有授权则 next() 没有授权菜单则先获取用户信息，然后调用获取菜单请求，成功则跳转到正确页面。获取失败则返回登录页，并将当前 URL 提取组合到 ?redirect= 重定向参数当中。permission.js · vueComponent/ant-design-vue-pro

登录操作成功之后判断当前路由信息中是否有 redirect 信息，如果有就重定向到 redirect 路径上。

回答：

router.isReady().then(() => app.mount('#app'))
等待路由准备就绪，再加载组件

以上是 vue 管理后台获取菜单和页面刷新先后问题？ 的全部内容， 来源链接： utcz.com/p/933646.html

回到顶部