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啥的。

效果