上一篇文章我们遗漏了一点,那就是当用户的权限不足时,访问权限不足的路由是会发生什么呢?我们没有定义的话来看一下:
页面空空,啥也没有。
在文档中其实给出了解决方案:
import { runApp, request, IAppConfig,Redirect } from 'ice';
const appConfig: IAppConfig = {
app: {
getInitialData: async () => {
// 模拟服务端返回的数据
const data = await request('/api/auth');
const { role, starPermission, followPermission } = data;
// 约定权限必须返回一个 auth 对象
// 返回的每个值对应一条权限
return {
auth: {
admin: role === 'admin',
guest: role === 'guest',
starRepo: starPermission,
followRepo: followPermission,
},
};
},
},
auth: {
// 可选的,设置无权限时的展示组件,默认为 null
NoAuthFallback: <div>没有权限...</div>,
// 或者传递一个函数组件
// NoAuthFallback: () => <div>没有权限..</div>
// NoAuthFallback: () => <Redirect to="/login" />
},
};
runApp(appConfig);
就是入口文件配置项中的auth选线,这个选项有个属性NoAuthFallback,可以是一个组件,也可以是一个函数组件,我们可以在函数组件中设置重定向。
Redirect之ice框架自带的,直接导出使用即可,关于重定向,我们不止在组件中使用,在配置路由时也可使用:
import UserLayout from '@/Layouts/UserLayout';
import UserLogin from '@/pages/UserLogin';
import NotFound from '@/components/NotFound';
import wrapperPage from '@/components/WrapperPage';
const routerConfig = [
// 分组路由,children 里的路由会将父节点的 component 作为布局组件
{
path: '/user',
component: UserLayout,
children: [
{
// 路由路径
path: '/login',
// 精确匹配
exact: true,
// 路由组件
component: UserLogin,
// 配置路由的高阶组件
wrappers: [wrapperPage],
// 扩展配置:icejs 1.x 仅支持将 pageConfig 配置在对应的页面组件上,具体请参考「页面组件」章节
pageConfig: {
title: '登录页面',
scrollToTop: true,
// ...
},
},
{
path: '/',
// 重定向
redirect: '/user/login',
},
{
// 404 没有匹配到的路由
component: NotFound,
},
],
},
// 非分组路由
{
path: '/about',
component: About,
},
];
export default routerConfig;
这个补充希望对大家有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。