umijs路由鉴权

Tips

1、未登录鉴权后一律跳转至登录页面

2、未声明路由跳转至404页面

路由配置

config/routers.ts

export const routes = [
  { path: '/login', component: './Login' },
  {
    path: '/',
    // 鉴权 有坑 鉴权下级一定要component
    wrappers: [
      './Authorized',
    ],
    component: '../layouts',
    routes: [
      {
        path: '/',
        redirect: '/home',
      },
      {
        path: '/home',
        component: './Home',
      },
      {
        component: './404',
      },
    ],

  }
]

tips

1、component做下级或者当前路由鉴权的时候需要component,不然不会进入进入鉴权，我就不演示了

登录鉴权

Authorized.tsx

import React from 'react';
const { Redirect } = require('dva').router;

const AuthRouter = (props:any) => {
  // 这个根据自己判断是否登录
  const isLogin = window.localStorage.getItem('user')?true:false;
  return (
  isLogin ? <div>{props.children}</div>: <Redirect to="/login" />
  )
}

export default AuthRouter;

其他页面的我就不贴代码了，就登录，首页，404啥的。

效果