cra-bs
v0.0.2
Published
用于引导用户使用自定义模版来初始化项目框架
Downloads
4
Readme
bsy-sso-login 使用文档
bsy-sso-login 是前端对接 SSO 登录的sdk。
快速开始
1. 安装
npm i -S bsy-sso-login
或者
yarn add bsy-sso-login
2. 在代码中使用
bsy-sso-login 本质上默认导出了一个异步的登录函数,所以你需要先在代码中引入它:
import ssoLogin from 'bsy-sso-sdk'
你需要传入以下参数:
import ssoLogin,{cleanAuthUrl} from 'bsy-sso-login'
ssoLogin(
clientId, // 平台的ID,string(必填),找后端开发同学要
debugMode // boolean(必填),在开发环境请开启调试模式,在生产环境请关闭调试模式
).then(accessToken=>{ // 异步函数执行的结果是 accessToken,使用 accessToken 来作为业务平台的登录请求的参数
// 以下为示例:
window.axios.post('/mtrpc/digital/bs.digital.auth.Auth/Login', {
clientID: process.env.REACT_APP_SSO_CLIENT_ID,
ssoToken: accessToken
}).then(({ data }) => {
cleanAuthUrl() // 请务必在登录之后调用这个函数(用于清除URL中已经被使用过的参数)
window.localStorage.setItem('user-info', JSON.stringify(data))
})
})
拿到token之后,就可以在业务中发网络请求了。
如果token失效,则网络请求响应的code是1016,
所以你需要在网络请求中判断,如果code=1016,则需要清除原来保存的token信息,并且刷新页面, bsy-sso-login导出了一个token失效之后的处理函数,你可以在定义请求实例的时候使用它:
import { onTokenInvalid } from 'bsy-sso-login'
if (code === 1016) {
onTokenInvalid()
}
一个使用示例
在 React 项目的根组件中:
// App.js
import React, { useEffect, useState } from 'react'
import Pages from './pages'
import { Spin } from 'antd'
import 'util/initRequest' // 初始化网络请求模块
import ssoLogin, { cleanAuthUrl } from 'bsy-sso-login'
import './App.css'
const App = () => {
const [logining, setlogining] = useState(true)
useEffect(() => {
ssoLogin(
[clientID],
[debugMode],
).then(accessToken => {
if (!accessToken) {
setlogining(false)
} else {
window.axios.post('/mtrpc/digital/bs.digital.auth.Auth/Login', {
clientID: process.env.REACT_APP_SSO_CLIENT_ID,
ssoToken: accessToken
}).then(({ data }) => {
setlogining(false)
cleanAuthUrl()
window.localStorage.setItem('user-info', JSON.stringify(data))
})
}
})
}, [])
return (
<Spin spinning={logining} tip="正在获取SSO授权...">
<Pages />
</Spin>
)
}
export default App
或者直接参考 /test 目录下的示例项目