2024年前端最全从零搭建飞冰微前端项目《第四篇：权限管理》，2024年最新附面试答案

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

},

}

},

二、路由级权限配置

---

路由级（页面级）权限，按钮级权限🎈颗粒度到按钮（后端返回权限数组，判断当前按钮权限字段能否匹配）

1. 路由级别路由配置使用高阶组件，有app.tsx里的auth判断是否有当前页面权限，没有则不显示（先暂时跳转login）

2. 目的：配置下面三个就可控制路由级别权限

• app.tsx配置getInitialData初始化的时候获取权限

getInitialData: async () => {

// 业务上封装统一的请求方法，与服务端约定接口协议，前端根据状态码判断无权限、未登录等状态，然后跳转到指定页面。！！！！！！！！！！

try {

const data = await request(‘/user/permission’);// 发请求拿权限或者验证权限

return { auth: data }

} catch (e) { return { auth: {} } }

},

auth: {

NoAuthFallback: ,//设置无权限时的展示组件默认为 null

// 或者传递一个函数组件：NoAuthFallback: () =>

没有权限…

},

//外层的router也需要配菊花！！！

router: {

type: ‘browser’,// 统一History路由

fallback:

},

• 高阶组件：

//路由高阶组件

import { useAuth, Redirect } from ‘ice’;

const LoginWrapper = (WrappedComponent) => {

const Wrapped = (props) => {

const [auth] = useAuth();

console.log(auth,“取到的页面配置auth”);

return <>{auth.isLogin ? <WrappedComponent {…props} /> : }</>;

};

return Wrapped;

};

export default LoginWrapper;

• 🧡路由匹配高阶组件、这个地方记得组件懒加载（暂时没写报错的路由跳转）：

import { IRouterConfig, lazy } from ‘ice’;

import Home from ‘@/pages/Home’;

import Login from ‘@/pages/Login’;

import NotFound from ‘@/components/NotFound’;

import wrapperPage from ‘@/components/LoginWrapper’

const Register = lazy(() => import(‘@/pages/Register’));

const ForgotPassword = lazy(() => import(‘@/pages/ForgotPassword/components/StepForm’));

const Instruction = lazy(() => import(‘@/pages/Instruction’));

const routes: IRouterConfig[] = [

//新的分组路由需要到 layout里的FrameworkLayout、app.tsx里的request 改判断

{

path: ‘/login’,//登录

component: Login,

},

{

path: ‘/register’,//注册

component: Register,

},

{

path: ‘/forgotpassword’,//忘记密码

component: ForgotPassword,

},

{

path: ‘/instruction’,//账号说明

component: Instruction,

},

{

path: ‘/’,//主应用==首页

exact: true,//精准匹配

component: Home,

wrappers: [wrapperPage],

},

{

component: NotFound,

}

];

export default routes;

三、按钮级权限配置

---

正在开发中。。。🤣🤣🤣

四、UI图还没出、原型还没定、配得也差不多了、先写一波页面

---

进度：

---

1. 搭好了主应用、微应用

2. Token管理、请求拦截、代理、表单收集

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】