网站建设的工具,炫酷个人网站php源码,wordpress 模版教程,南京seo排名优化公司应用场景 甲方现有平台系统拟集成我方新开发系统#xff0c;实现单点登录功能#xff0c;即用户登录主平台后#xff0c;无需重复登录即可无缝访问新系统#xff0c;提升用户体验与操作效率。 解决方案 实现代码
前端
Step:1 新建ssoLogin.vue页面 templated…应用场景 甲方现有平台系统拟集成我方新开发系统实现单点登录功能即用户登录主平台后无需重复登录即可无缝访问新系统提升用户体验与操作效率。 解决方案 实现代码
前端
Step:1 新建ssoLogin.vue页面 templatediv/div
/templatescript
export default {name: SSOLogin,data() {return {loading: false,redirect: undefined,};},watch: {},created() {// 第三方平台登录this.getLoginByToken();},methods: {// 第三方平台单点登录系统getLoginByToken() {//获取地址栏中的tokenvar token this.$route.query.token;//调用登录的接口if (token || token undefined || token null) {// 无token跳转到登录页面this.$router.push({ path: /login }).catch(() {});} else {// 第三方平台单点登录系统this.loading true;var loginInfo {token: token,};this.$store.dispatch(LoginByToken, loginInfo).then((res) {this.$message.success(登录成功);this.loading false;//获取用户信息let roleName res.data.roleName;if (roleName user) {sessionStorage.setItem(SSORoleName, roleName);}this.$router.push({ path: this.redirect || / }).catch(() {});}).catch((err) {console.log(登录失败, err);//异常信息this.loading false;});}},},
};
/scriptStep:2 在store-modules的user.js中实现LoginByToken import { login, logout, getInfo, loginByToken } from /api/login// 通过token单点登录LoginByToken({ commit }, userInfo) {const token userInfo.token;return new Promise((resolve, reject) {loginByToken({ token: token }).then(res {setToken(res.token)commit(SET_TOKEN, res.token)resolve()})}).catch(error {reject(error)})},
Step:3 在api目录的login.js中实现loginByToken方法
// 通过token单点登录
export function loginByToken(token) {return request({url: /ssoLogin,method: post,params: token})
}Step:4 在router的index.js中添加如下路由 {path: /ssoLogin,component: () import(/views/ssoLogin),hidden: true},Step:5 在src的permission.js中修改白名单如下
const whiteList [/login, /register, /ssoLogin]
