Verify login information using the token

Front-end single point storage

Share the token value of the localStorage data. The token storage mode is localStorage or sessionStorage, which are restricted by the same origin policy.

Cross-domain storage

If you want to implement cross-domain storage, find a mechanism for cross-domain communication, namely iframe postMessage, which can safely implement cross-domain communication and is not restricted by the same origin policy (the back-end configuration should be modified to allow iframe to open addresses of other domains).

Cross-storage.js (open source library)

The principle is to use the postMessage cross-domain feature to achieve cross-domain storage. Since multiple pages in different domains cannot share local storage data, we need to find a “transit page” to uniformly process the storage data of other pages

Front-end and back-end communication

Multi-platform entrance page = “a platform transfer page =” platform home page

Platform transfer page

The tokens of other platforms are converted to trust tokens of the current platform

/** Sso to obtain tickets */ export async function getTicket(token) {return request('/getTicket', {method: 'GET', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'x-access-token': token }, }); } /** async function singleLogin(data) {return request('/singleLogin', {method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'x-access-token': token }, data }); } export default (props: Any) => {const _singleLogin = async () => {try { code, data } = await getTicket(token); Const link = '/home'; if (code ! = = 200 | |! data) { window.location.href = link; return; } const res: any = await singleLogin({ticket: data, source: ",// platform source}); if (res? .code === 200) { localStorage.setItem('tokneKey', res? .data.tokneKey); localStorage.setItem('tokenValue', res? .data.tokenValue); } else { console.log(res? .msg); localStorage.removeItem('tokneKey'); localStorage.removeItem('tokenValue'); } window.location.href = link; } catch (e) { window.location.href = link; }}; useEffect(() => { _singleLogin(); }); return ( <div style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', display: 'flex' }}> <Spin spinning={loading}></Spin> </div> ); };Copy the code