执行流程

改造前：加载子业务系统登录页面 -> 拿到认证token，用户数据，权限菜单等信息 -> 加载子业务系统。
改造后：携带token访问子业务系统 -> 加载主页面（等待权限菜单） -> 异步获取用户数据，权限菜单等信息。

实现原则

考虑子业务系统页面实现方式的复杂多样，鉴权模块尽可能满足以下几点：

• 适用场景广泛
• 最小化修改
• 拓展性强

实现方式

这里以子业务系统 http://localhost 为例进行讲解。

1.获取认证token

后台返回浏览器地址为 http:// localhost?token=xxx ，获取token为xxx，并清除地址栏token。

2.获取用户数据和权限菜单

检测本地是否有用户和菜单的缓存

• 有：在 router初始化的位置 获取缓存数据并添加到router
• 没有：找准时机，在合适的位置，添加获取用户和菜单的代码，然后 使用addRoutes修改菜单

3.接口认证

根据接口文档，传递认证token参数。

遇到的问题

1. 获取用户数据和权限菜单的时机如何把握，相关代码书写的位置如何选择？

2. 使用addRoutes修改菜单，但是获取菜单数据不存在，需要借助vuex存储？

3. 数据拓展性差？

4. 页面异常状态如何呈现？

5. 首屏加载哪个权限页面？

6. 综合以上几点，反映出这种实现方式的局限性？

优化思路

添加中间页sso.html，脱离子业务系统代码环境，将鉴权逻辑整合成一个模块，尽可能少地干涉所接入的系统。

优化后执行流程

改造前：加载子业务系统登录页面 -> 拿到认证token，用户数据，权限菜单等信息 -> 加载子业务系统。
改造后：携带token访问sso中间页面 -> 加载sso页面主动获取用户数据，权限菜单等信息 -> 跳转子业务系统。

优化后实现方式

这里以子业务系统 http://localhost 为例进行讲解。

1.获取认证token，用户数据和权限菜单

后台返回浏览器地址为 http:// localhost/sso.html?token=xxx ，获取token为xxx，获取用户数据、权限菜单以及其他需要的数据（如果有异常，提示异常状态），保存以上数据到本地，并跳转子业务系统 http://localhost。

2.加载子业务系统

根据需要，直接读取和使用用户数据和权限菜单。

3.接口认证

根据接口文档，传递认证token参数。