react的路由健全?

简介: react的路由健全?

 .umirc.ts配置好路由路径

       给需要设置权限的路由配置

1. export default {
2.   routes: [
3.     { path: '/user', component: 'user',
4.       wrappers: [
5. '@/wrappers/auth',
6.       ],
7.     },
8.     { path: '/login', component: 'login' },
9.   ]
10. }

src文件夹下面创建一个wrappers文件夹 ——》auth.jsx生成

       

1. // 然后在 src/wrappers/auth 中,
2. 
3. import { Redirect } from 'umi';
4. export default (props) => {
5. //判断是否已经登录 如果登录让其进入指定页面
6.   let isLogin = localStorage.getItem('token')
7.   console.log(props.location);
8. if (isLogin) {
9. return <div>{props.children}</div>;
10.   } else { //否则跳转到登录页面,并且传递token
11.     alert('未登录不能进入查看')
12. return (
13. <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
14.     );
15.   }
16. };

然后就可以实现路由健全了。

如果没有响应的权限就跳转到对应的页面登录获取权限

1. login的jsx页面
2. import React from 'react'
3. export default function login(props) {
4. // 此操作可以获取到来时的路径,方便进行返回。
5. // console.log(props.location.pathname,11111);
6. return (
7. <div>
8. <h1>登陆页面</h1>
9.       昵称:<input type="text" name="" id="" />
10.       密码:<input type="text" name="" id="" />
11. </div>
12.   )
13. }


相关文章
|
21天前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
41 2
|
21天前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
66 0
|
21天前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
56 1
|
21天前
|
移动开发 前端开发 API
第三十二章 React路由组件的简单使用
第三十二章 React路由组件的简单使用
|
21天前
|
存储 前端开发 JavaScript
第三十章 React的路由基本使用
第三十章 React的路由基本使用
|
21天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
57 0
|
21天前
|
前端开发 UED 开发者
react路由懒加载lazy直接使用组件标签引发的问题?
react路由懒加载lazy直接使用组件标签引发的问题?
187 0
|
21天前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
31 1
|
21天前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
43 4
|
21天前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式