从0开始全栈项目-04 umi配置式路由实现多级路由导航以及路由权限校验

完成了用户的登陆,接下来需要实现前端的路由规则配置.才能完成后台管理系统的选项卡切换

umi 路由官方文档.
官方文档写的很抽象,理解了半天才弄懂是什么意思.

1. umi路由分成配置路由和约定路由,如果 .umric.ts 配置文件里面没有 route属性,则采取约定式路由
2. 约定式路由比较蛋疼,还是配置式路由直观,很多东西可以直接设置

配置式路由

首先在 .umirc.ts 配置文件下添加routes属性是一个数组,里面放着各种路由页面, /login ,对应 login组件这就不谈了,一目了然,我们来看看layout的含义.
当 path 为跟路径时,我们的component指向了 layouts/文件夹下的index文件,然后该路由还有一个 routes属性,里面又写了一些路由组件.
这表示这些路由组件是根路由组件的二级路由.
接下来我们看看 layout/index文件是如何编写的

这么写的逻辑等同于

原本需要定义一个 index 组件当是根路由的时候显示,然后在组件里面做这样的操作,现在可以用上面的方式简化路由写法

路由的权限校验

有的电商平台会有一些吸引用户注册登陆的按钮,只有在登陆之后才能对用户展示,有些页面是游客也可以看的.
常规做法是在网络请求中拦截如果发现403则跳转到登陆页面,这有一点不好的就是会有一个网络请求,如果网络慢一点则用户会先看到页面然后再跳转,有了权限校验就不会了.

每一个路由都有一个wrappers 属性,里面是一个数组,配一个校验的功能

这样,当用户如果访问了 /category路由就会判断,如果没有登陆就会跳转到登陆页面

路由传参

umi的路由传参和其他的没什么区别