主要设计思路
- 独立的登陆页面项目 ,所有子系统的公共登陆页;
- axios请求拦截 ,子系统要做请求拦截,判断是否有token,token可以存在localstory和cookie里;
- 登陆页 ,登陆成功后,token存入localstory/domain中,重定向到子系统;
独立的登陆页面项目
- 使用vue-cli4 脚手架搭建公共登陆页系统 ,编写登陆页,(这很简单)
- 子项目路由拦截必须修改
子系统axios设置
- 请求拦截
var mainUrl="https://123123.flagUrl.com"
axios.interceptors.request.use(config=>{
var accessToken= cookies.get('Authorization')
if(!accessToken){
accessToken = localStorage.getItem('accessToken')
}
if (accessToken) {
config.headers.Authorization = accessToken;
} else {
window.location.href = mainUrl?redirectUrli=' + window.location.href;
}
})
- 响应拦截
axios.interceptors.response.use(function (response) {
window.location.href = mainUrl?redirectUrli=' + window.location.href;
})
主登陆页代码
- 登陆成功逻辑
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
let result = res.data;
let str = window.location.hash;
document.cookie = "Authorization=" +result.token +
";domain=.flagUrl.com;path=/";
localStorage.setItem('accessToken', accessToken);
let oldUrls=str.split("redirectUri=")
window.location.href = decodeURIComponent(
oldUrls[ oldUrls - 1]
);
})
主要难点
- 所有子项目路由必须以.flagUrl.com结尾
具体原因,自行百度 “跨域” - cookie设置 domain 使用, 设置localstory
- **如果子系统 已经是老项目 不能用.flagUrl.com **
可以主登陆页面和子系统页面 都隐藏一个相同域名的iframe作为中间信息传递, 目的都是为了多系统之间的token传递