前端集成 CAS 单点登录后如何获取用户信息?
我们项目用的是 CAS 做单点登录,后端已经对接好了,登录跳转也没问题。但现在前端想在 React 里拿到当前登录用户的用户名或者属性,不知道该怎么取?尝试从 URL 的 ticket 参数去请求接口,但总提示未认证。
比如我现在这样写,但 getUserInfo 返回的是 401:
useEffect(() => {
const fetchUser = async () => {
const res = await fetch('/cas/user-info'); // 后端提供的接口
const data = await res.json();
console.log(data);
};
fetchUser();
}, []);
1. 你直接请求接口401是因为没带ticket参数。CAS认证成功后,服务端会建立session,但前端需要带上ticket或cookie才能访问受保护接口。
2. 更常见的做法是让后端在登录成功后的跳转页面中直接注入用户信息。比如这样修改后端配置,让CAS在跳转时把用户信息通过JWT或直接写在HTML里:
3. 前端可以通过全局变量或meta标签获取:
4. 如果必须通过API获取,确保请求时带上session凭证。检查你的fetch请求是否自动发送cookie:
5. 调试时先看浏览器开发者工具的Network面板,确认请求是否带了正确的Cookie或Authorization头。
遇到401先别慌,十有八九是凭证没带对。CAS这玩意儿配置起来就是各种小细节容易出问题,我上次也折腾了半天才发现是CORS配置没加cookie。