iview-admin-使用

最新推荐文章于 2025-10-19 12:35:37 发布

原创最新推荐文章于 2025-10-19 12:35:37 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

22 篇文章

订阅专栏

本文档介绍了iView Admin的路由导航守卫机制，详细阐述了如何在进入路由前进行进度条开启、token获取与用户信息的鉴权，以及在进入路由后设置页面标题并关闭进度条的过程。在未获取token时，系统会引导至Login组件；获取token后，会尝试获取用户信息并进行权限判断。若用户信息获取异常，系统将重新引导至登录页面。每个路由的meta.access属性用于定义路由权限，通过hasAccess方法对比用户的access与路由的access来决定是否允许访问。

-----------------------------------------------------------
index.html: <div id="app"></div>

main.js : new Vue({el: '#app',router,il18n,store,render-->app.vue})
app.vue : <div id="app"><router-view/></div>
------------------------------------------------------------

导航守卫【进入路由前】
           【进度条开启---获取token】
                                   ---未获取---进入Login组件
                                       ---获取   ---是:获取用户信息：user.hasGetInfo
                                       --- 鉴权---目标页面/401
否:获取用户信息
--- store.getUserInfo
---异步axios获取
---设置信息+setHasGetInfo
---鉴权---目标页面/401
---异常：重新登录

导航守卫【进入路由后】
【设置页面title---进度条关闭】

---进入Login组件---login()[返-token]---存token
---getUserInfo(token)[返-[USER_MAP[token]]]
---跳转homeName

---turnTo目标页面---鉴权[即将跳转的路由name+access 用户权限数组+routes 路由列表]
---hasAccess = (access, route)：如果参数不存在，通过
存在则验证，比对当前用户的access与路由的access是否一致，通过/拒绝
每一个router定义时，如果需要定义路由权限，则在meta.access=[角色]