umi权限路由_umi 入门之项目配置

umi 项目配置

一、运行配置

约定src/app.tsx为运行配置

配置项目

1.patchRoutes 修改路由，可获得整个路由系统

export function patchRoutes({ routes }) {

routes.unshift({

path: '/foo',

exact: true,

component: require('@/extraRoutes/foo').default,

});

}

复制代码

2.render 复写render,可做权限效验等需要在渲染前完成的操作

import { history } from 'umi';

export function render(oldRender) {

fetch('/api/auth').then(auth => {

if (auth.isLogin) { oldRender() }

else { history.redirectTo('/login'); }

});

}

复制代码

3.onRouteChange({routes，matchedEoutes,location,action})

路由初始加载和路由改变时触发

bacon(location.pathname);

}

复制代码

二、插件配置

1.@umijs/plugin-initial-state

1.1启动方式

​ 有src/app.tsx 并且到处getInitialState方法时启用

1.2运行配置

getInitialState

// src/app.ts

export async function getInitialState() {

const data = await fetchXXX();

return data;

}

如果要做权限拦截，此函数会最开始执行，获取权限数据之后,layout、access插件可以获取这个数据

参考链接：

https://github.com/umijs/plugin-access

复制代码

2.@umijs/plugin-access

2.1启用方式

有src/access.ts时启用

2.2运行配置 ，导出一个权限对象

// src/access.ts

export default function(initialState) {

const { userId, role } = initialState;

return {

canReadFoo: true,

canUpdateFoo: role === 'admin',

canDeleteFoo: foo => {

return foo.ownerId === userId;

},

};

}

initialState 是通过@umijs/plugin-initial-state返回的数据，可以用此数据进行权限判断

复制代码2.3 扩展路由权限拦截配置

export const routes = [

{

path: '/pageA',

component: 'PageA',

access: 'canReadFoo', // 权限定义返回