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', // 权限定义返回

umi权限路由_umi 入门之项目配置相关推荐

umi权限路由_Umi 小白纪实（三）—— 震惊！路由竟然如此强大！
在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角借用一句广告词,Umi 路由的能量,超乎你的想象一.基本用法 Umi 的路由根结点是全局 layout s ...
uni-app 5小时快速入门 6 项目配置
uni-app 5小时快速入门文章目录 uni-app 5小时快速入门 6 项目配置 6.1 manifest.json 6.1.1 基础配置 6.1.2 App图标配置 6.1.3 App启动界面 ...
vue3 路由 vite方式新建项目配置路由【适合新手】
一配环境.并初始化项目安装nodejs https://blog.csdn.net/lh155136/article/details/128444850 参考官网https://cn.vuejs. ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
【音视频安卓开发（一）】AndroidStudio项目配置权限、jni库路径、ABI、Cmake
cmake项目配置 # For more information about using CMake with Android Studio, read the # documentation: ht ...
【音视频安卓开发（四）】AndroidStudio项目配置权限、jni库路径、ABI
读写权限权限(版本) 添加jni用到库所在的路径设置cmake和NDK参数 cmake项目配置
【Umi+Dva入门实战】简述Dva、Umi和路由的理解
Umi 3+Dva入门实践–简述Dva.Umi和路由的理解 dva/umi/react 之间的关系 dva简介 umi简介 umi插件体系路由简介观看下面视频学习 https://www.bili ...
Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
LINUX新手入门及安装配置FAQ(http://bbs.blueidea.com/viewthread.php?tid=635906amp;page=)
LINUX新手入门及安装配置FAQ 剑气凌人 [楼主] 尖脐荣誉管理团队帖子 6386 体力 10046 威望 168 当前北京海淀区发短消息个人网站 1# 大中小发表于 ...

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

umi权限路由_umi 入门之项目配置相关推荐

最新文章

热门文章