添加动态路由配置和权限控制

本节目标：理解“添加动态路由配置和权限控制”的核心思路，并能把它用于实际开发或面试表达。 主要是在beforEach钩子处理的； permission.beforeEach(router);

总体要实现，每进入一个新的路由：

• 判断用户是否有登录：
  • 没有登录就要去登录，然后再统一进入下面的逻辑；具体就是就从location中取得ticket，然后用ticket换取token，如果没有location中没有ticket，则跳转到登录页面，然后登录后有了ticket，就可以进入到换取token，反正最后再进入下一个逻辑前，肯定是登录了的；
  • 我们把所有其它情况都统一处理成，进入到这里时已经登录，然后获取一下后台返回的菜单和按钮权限，当然，如果已经获取过了，就不再获取；所以菜单权限发生变化了，要重新请求，一般刷新页面即可；
  • 在处理后端返回数据时，我们在等着没有民航，然后从后端数据中得出当前用户的首页应该是什么；然后我们再根据返回的首页数据跳转到相应的首页；
  • 如果应用菜单数据已经加载，我们返回一个空的首页，然后指示导航next()，即不用跳转到具体首页，正常导航即可；

具体细节 一、每一次进入到一个新的路由时，permission.beforeEach(router)都会调用一次； 二、它做的事件有：

• 先查看当前path，如果公开的访问地址如登录注册，直接放行；
• 否则，看是否有登录，主要依据就是cookie中的特定字段：
  • 如果没有登录：
    • 从地址栏中获取ticket；
    • 如果有ticket，然后调用loginsByJson后台接口，从中获得用户的uuid和token，然后设置cookie值；
    • 如果没有ticket，调用 store.dispatch('p8app/user/logout，做清理工作，重定向到统一登录页；
  • 上面处理完，肯定是登录了，再处理一下后台返回的菜单和按钮权限数据，如果已经处理了，就不再处理；它主要是做以下事情：
    • 我们会把后端返回的原始值也存在在store中；同时将后端返回的菜单和按钮数据处理成路由配置，菜单权限对应了相应的路由，按钮权限直接放在路由的meta信息中；
    • 然后我们调用路由对象router的resetRouter方法，将得到的路由配置生效；

用户刷新页面的处理

• 当用户刷新页面时，如果是history路由，这个路径的请求会先到后端，后端会统一转到我们的入口html，接下来，前端的vue-router会接管对路由的处理，会从中取出to和from，对于刷新页面，from肯定是/，to的话就是之前浏览器中的href。

用户刷新页面时的处理流程

1. 浏览器请求:
   1. 当用户刷新页面（例如按下浏览器的刷新按钮）时，浏览器会发送一个 HTTP 请求到服务器，请求当前的 URL 路径。例如，如果用户当前在 http://example.com/profile， 刷新页面时浏览器会向服务器发送请求 /profile。
2. 服务器处理请求:
   1. 服务器接收到请求后，会处理这个路径。在典型的单页应用程序（SPA）中，服务器通常会将所有非静态资源的请求重定向到入口 HTML 文件（例如 index.html）。
   2. 这种处理方式确保了无论请求什么路径，服务器始终返回相同的 HTML 文件，使得前端的 JavaScript 应用可以接管路由逻辑。
3. 前端应用初始化:
   1. 浏览器接收到 HTML 文件后，开始解析并加载其中包含的 JavaScript 文件。这时，前端的 Vue 应用程序会初始化并启动 Vue Router。
   2. Vue Router 在启动时，会读取浏览器的当前 URL 并解析成相应的路由对象。
4. Vue Router 接管:
   1. Vue Router 在启动时，会触发导航守卫（如 beforeEach）。
   2. to 对象表示目标路由，即用户在刷新前所在的页面。
   3. from 对象表示来源路由。在页面刷新时，from 通常是根路径 / 或空对象，因为这是一个新的导航开始。