从零搭建飞冰微前端项目《第四篇：权限管理》

• 如果没有token，排除主路由外的分组路由（比如忘记密码路由是不用刷新跳回登录页的，但是主页里面的路由刷新如果没有权限需要跳回登录页）之后跳回登录页。

思路 2 、响应拦截：

• 如果成功，提示成功。

思路 3 、错误拦截：

• 与后端约定，根据不同status，对应不同权限，渲染不同组件

request: {

withFullResponse: false,//全局设置 request 是否返回 response 对象，默认为 false-----截取响应数据

interceptors: {//拦截

request: {//全局拦截请求

onConfig: (config) => {

const accessToken = localStorage.getItem(‘ACCESS_TOKEN’);

if (accessToken) {

config.headers = { Authorization: Bearer ${accessToken} } //每次请求携带Token

} else if (location.pathname !== ‘/login’ && location.pathname !== ‘/register’ && location.pathname !== ‘/forgotpassword’) {//分组路由限制

appHistory.push(‘/login’);

}

return config;

}

},

response: {//全局拦截响应

onConfig: (response: any) => {

const success = response.data.success ? response.data.success : response.data.message === ‘成功’;//还需了解

if (!success) {

// 提示失败信息

const { data: { msg } } = response;//连续解构赋值

Message.error(msg);

return Promise.reject(msg);

}

return response.data;

},

onError: (error: any) => {//全局拦截请求报错

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

const status = error.response.status;

console.log(status);

if (status === 401) {

const accessToken = localStorage.getItem(‘ACCESS_TOKEN’);

if (accessToken) Message.error(“用户身份信息已失效，请重新登录”)

appHistory.push(‘/login’);// 跳转到登录页面，重新登录(账号密码输入错误的时候)

} else if (status === 403) {

appHistory.push(‘/feedback/403’);// 跳转到没有权限页面

} else if (status === 404) {

appHistory.push(‘/feedback/404’);// not found页面

} else {

appHistory.replace(‘/login’);

}

return Promise.reject(error);

}

},

}

},

二、路由级权限配置

---

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

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,

},

{

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
715822192941)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！