首页前端知识 Umi实现路由鉴权

Umi实现路由鉴权

2024-06-01 10:06:35 前端知识前端哥 71 834 我要收藏

在src文件夹下创建一个wrappers文件夹，并创建一个index.tsx

 import React from 'react';
import { Redirect } from 'umi';
 
const AuthRouter = (props: any) => {
  // 这个根据自己判断是否登录
  const token = window.sessionStorage.getItem('user') ? true : false;
  return token ? <div>{props.children}</div> : <Redirect to="/login" />;
};
 
export default AuthRouter;复制

 const router = [
    {path:'/login',component:'@/pages/login'},
    {path:"/home",component:'@/pages/home',wrappers: ['@/wrappers'],}
]复制

通过 umi 的 defineConfig 方法定义配置，在routes中定义配置的路由

 import { defineConfig } from 'umi';
import list from './config';
 
export default defineConfig({
  routes: list,
});复制

2024-08-27 09:08:17

2024-05-09 11:05:34

2024-06-06 10:06:47

2024-04-22 09:04:34

2024-03-29 15:03:20

2024-04-20 17:04:38

2024-05-10 08:05:15

2024-10-30 21:10:12

2024-11-10 09:11:04

2024-11-10 09:11:50

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

Umi实现路由鉴权

	import React from 'react';
	import { Redirect } from 'umi';

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

	export default AuthRouter;

	const router = [
	{path:'/login',component:'@/pages/login'},
	{path:"/home",component:'@/pages/home',wrappers: ['@/wrappers'],}
	]

	import { defineConfig } from 'umi';
	import list from './config';

	export default defineConfig({
	routes: list,
	});

Umi实现路由鉴权

微信扫一扫：分享