.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. }
