泰州网站建设优化,建立新中国的构想及其实践,西安住房和城乡建设局网站,网站建设与实现毕业答辩ppt上一节我们有讲到如何对接登录接口的 【图文并茂】ant design pro 如何对接登录接口
仅仅能登录是最基本的#xff0c;但是我们要进入后台还是需要另一个接口。
这个接口有两个作用#xff1a;
来获取当前登录账号的信息#xff0c;比如头像#xff0c;用户名#xff0…
上一节我们有讲到如何对接登录接口的 【图文并茂】ant design pro 如何对接登录接口
仅仅能登录是最基本的但是我们要进入后台还是需要另一个接口。
这个接口有两个作用
来获取当前登录账号的信息比如头像用户名还有一些权限信息等来验证一下后台是否登录过
关于第二点是很重要的这个接口就是必须你要登录过一次拿到 token 之后才能访问到。
如果你没有 token 也就是说没有登录过这个接口访问的时候就会出问题比如你都没登录过你觉得能拿到个人信息吗拿谁的。所以没有登录过的就让它跳到登录页面就是这个接口的作用。
有没有登录过就只看浏览器有没有存好 token. 实现好后端
const getUserProfile handleAsync(async (req: RequestCustom, res: Response) {// 确保在请求处理流程中间件中已经添加了解析 JWT 并设置 req.userconst user: IUser | null await User.findById(req.user?._id).populate(roles) // 预加载 roles 字段.exec();if (user) {// 再次预加载 permissions 字段因为 roles 已经被预加载await user.populate(roles.permissions);res.json({success: true,data: {...exclude(user.toObject(), password),avatar: https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png,},});} else {res.status(404);throw new Error(User not found);}
});后端只是把 req.user 的信息拿到并返回给前端罢了。
比如这样的信息 那么这个 req.user 是啥
我们看下路由 前面有个 protect 中间件这个可以拿到 req.user
它的逻辑是这样的
const protect handleAsync(async (req: RequestCustom, res: Response, next: NextFunction) {let token;if (req.headers.authorization req.headers.authorization.startsWith(Bearer)) {try {token req.headers.authorization.split( )[1];const decoded jwt.verify(token,process.env.JWT_SECRET as string,) as jwt.JwtPayload;const user: IUser | null await User.findById(decoded.id).populate({path: roles,populate: {path: permissions,model: Permission,},}).exec();if (!user || !user.live) {throw new Error(User is not live or not found);}req.user user;console.log(User is, user);next();} catch (error) {console.error(error);res.status(401).send({ message: error.message || Not authorized, token failed });}}if (!token) {res.status(401).send({ message: Not authorized, no token });}},
);主要是这里
req.headers.authorization req.headers.authorization.startsWith(‘Bearer’)
这个地方是从前端拿到头信息。 下一步就是通过 json web token 的库去解析这个字符串 token 。 token req.headers.authorization.split( )[1];const decoded jwt.verify(token,process.env.JWT_SECRET as string,) as jwt.JwtPayload;拿到里面的 id 再去数据库把当前用户找出来最后放到 req.user 中。
所以后面的 action 就可以拿到 req.user. 因为 protect 这里已经拿到并存到 req 了。
如果找不到
if (!token) {res.status(401).send({ message: Not authorized, no token });
}就会给前端一个 401 状态码。前端拿到 401 状态码就会跳出到登录页面。
process.env.JWT_SECRET 上面有个密钥这是服务器存的不能暴露出去就像你家的钥匙一样。
所以我们这个 token 是安全就算别人伪造了信息他没有你的 key 后面也是解析不了能判断是不是假的数据。
其实最上面 getUserProfile 里的
const user: IUser | null await User.findById(req.user?._id) .populate(‘roles’) // 预加载 roles 字段 .exec();
并不是必要的因为 req.user 应该有 user 的对象记录信息了。当然再查一遍也是没问题。
前端实现
主要是还是在这里
src/app.tsx
export async function getInitialState(): Promise{settings?: PartialLayoutSettings;currentUser?: API.CurrentUser;loading?: boolean;fetchUserInfo?: () PromiseAPI.CurrentUser | undefined;
} {const fetchUserInfo async () {try {const response await queryCurrentUser({skipErrorHandler: true,});return response.data;} catch (error) {history.push(loginPath);}return undefined;};// 如果不是登录页面执行const { location } history;if (location.pathname ! loginPath) {const currentUser await fetchUserInfo();return {fetchUserInfo,currentUser,settings: defaultSettings as PartialLayoutSettings,};}return {fetchUserInfo,settings: defaultSettings as PartialLayoutSettings,};
}还是跟以前一样要对接好请求地址方法参数
queryCurrentUser
这个逻辑是这样的
export async function currentUser(options?: { [key: string]: any }) {return requestAPI.CurrentUser(/auth/profile, {method: GET,...(options || {}),});
}用的是 get 方法地址要对。
后面是这个 const response await queryCurrentUser({skipErrorHandler: true,});return response.data;响应的数据要对上
跟这里的数据结构是要对上的API.CurrentUser type CurrentUser {isAdmin: CurrentUser | undefined;data?: any;name?: string;avatar?: string;role?: string;roles?: any;_id?: string;userid?: string;email?: string;signature?: string;title?: string;group?: string;tags?: { key?: string; label?: string }[];notifyCount?: number;unreadCount?: number;country?: string;access?: string;geographic?: {province?: { label?: string; key?: string };city?: { label?: string; key?: string };};address?: string;phone?: string;};也就是这里的 这里可能还差一个东西我们要把 token 提交过去。
我们下一节来讲
ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二ant design pro access.ts 是如何控制多角色的权限的ant design pro 中用户的表单如何控制多个角色ant design pro 如何实现动态菜单带上 icon 的ant design pro 的表分层级如何处理ant design pro 如何处理权限管理ant design pro 技巧之自制复制到剪贴板组件ant design pro 技巧之实现列表页多标签【图文并茂】ant design pro 如何对接登录接口
