SAAS-HRM-注册中心前台

最新推荐文章于 2022-01-20 20:17:55 发布

da-dalin

最新推荐文章于 2022-01-20 20:17:55 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/dalinlinda/article/details/104617647

版权

前台实现

授权中心(用户中心):有统一的登录界面

登录实现:

login(){
                            //4.发送ajax请求
                            this.$http.post("/user/sso/login",this.formParams).then(res=>{
                                var ajaxResult = res.data;
                                if(ajaxResult.success){
                                    alert("登录成功");

let accessToken = ajaxResult.resultObj;
                                    //通过cookie共享accessToken给其他站点  user不能直接放入cookie,因为不安全,但是可以
                                    //存放access-token到时通过access-token就能获取用户了
                                    setCookie("access-token",accessToken,"m30"); //session过期也是30分钟
                                    //保存用户到localStorage
                                    this.$http.get("/user/sso/ac/"+accessToken).then(res=>{
                                        var user = res.data;
                                        localStorage.setItem("user",user)
                                     })
//跳转到主页面 localhost和127.0.0.1不同的不能共享cookie
//location.href = "http://user.hrm.com:6003/user.home.html"
location.href = "http://127.0.0.1:6003/user.home.html"
//以后所有对后端服务的访问都要携带accessToken
                                }else{
                                    alert("登录失败:"+ajaxResult.message);
                                }
                            })

Common.js

//JS操作cookies方法!

//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}
//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
// setCookie("name","hayden");
// alert(getCookie("name"));


//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;


//写cookies
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//程序代码
function setCookie(name,value,time){
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    //所以hrm.com为父域名的任何路径都能共享cookie
    //document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/"+";domain=.hrm.com";
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/";
}
function getsec(str){
    var str1=str.substring(1,str.length)*1;
    var str2=str.substring(0,1);
    if (str2=="s"){
        return str1*1000;
    }else if (str2=="h"){
        return str1*60*60*1000;
    }else if (str2=="m"){
        return str1*60*1000;
    }else if (str2=="d"){
        return str1*24*60*60*1000;
    }
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
//暂时只写了这三种，不知道谁有更好的方法，呵呵
// setCookie("name","hayden","s20");

//axios初始化
axios.interceptors.request.use(config => {
    //如果已经登录了,每次都把token作为一个请求头传递过程

    let accessToken = getCookie("access-token");
    if (accessToken) {
        // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
        config.headers['access-token'] = accessToken;
    }
    console.debug('config',config)
    return config
}, error => {
    // Do something with request error
    Promise.reject(error)
})
axios.defaults.baseURL = "http://127.0.0.1:1030/services"//配置前缀
Vue.prototype.$http = axios //给Vue这个类添加一个原型的属性,这个类的对象都能调用
Vue.config.productionTip = false

//登录拦截判断 时候有accessToken
//是否能从localStrage获取获取用户,如果有自己跳过
//否则需要获取用户,再跳过
//var loginUrl = "http://user.hrm.com:6003/login.html"
var loginUrl = "http://127.0.0.1:6003/login.html"
$().ready(function(){
    // 登录拦截 要放行 login.html register
    let href = location.href;
    if(href.indexOf("login")!=-1 || href.indexOf("reg") !=-1)
        return;
    let accessToken = getCookie("access-token");
    if(!accessToken)
        location.href = loginUrl;

    let user = localStorage.getItem("user");
    if(!user){
        //保存用户到localStorage
        axios.get("/user/sso/ac/"+accessToken).then(res=>{
            var user = res.data;
            localStorage.setItem("user",user)
        })
    }
})

其他站点: 登录拦截,获取ac,进而获取用户存放localstorage

course

common.js

//JS操作cookies方法!

//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}
//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
// setCookie("name","hayden");
// alert(getCookie("name"));


//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;


//写cookies
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//程序代码
function setCookie(name,value,time){
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/";
}
function getsec(str){
    var str1=str.substring(1,str.length)*1;
    var str2=str.substring(0,1);
    if (str2=="s"){
        return str1*1000;
    }else if (str2=="h"){
        return str1*60*60*1000;
    }else if (str2=="m"){
        return str1*60*1000;
    }else if (str2=="d"){
        return str1*24*60*60*1000;
    }
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
//暂时只写了这三种，不知道谁有更好的方法，呵呵
// setCookie("name","hayden","s20");
//axios初始化
axios.interceptors.request.use(config => {
    //如果已经登录了,每次都把token作为一个请求头传递过程

    let accessToken = getCookie("access-token");
    if (accessToken) {
        // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
        config.headers['access-token'] = accessToken;
    }
    console.debug('config',config)
    return config
}, error => {
    // Do something with request error
    Promise.reject(error)
})
axios.defaults.baseURL = "http://127.0.0.1:1030/services"//配置前缀
Vue.prototype.$http = axios //给Vue这个类添加一个原型的属性,这个类的对象都能调用
Vue.config.productionTip = false

//登录拦截判断 时候有accessToken
//是否能从localStrage获取获取用户,如果有自己跳过
//否则需要获取用户,再跳过
//var loginUrl = "http://user.hrm.com:6003/login.html"
var loginUrl = "http://127.0.0.1:6003/login.html"
$().ready(function(){
    // 登录拦截 要放行 login.html register
    let href = location.href;
    if(href.indexOf("login")!=-1 || href.indexOf("reg") !=-1)
        return;
    let accessToken = getCookie("access-token");
    if(!accessToken)
        location.href = loginUrl;

    let user = localStorage.getItem("user");
    if(!user){
        //保存用户到localStorage
        axios.get("/user/sso/ac/"+accessToken).then(res=>{
            var user = res.data;
            localStorage.setItem("user",user)
        })
    }
})

注意:

1 一定要保证同域名

2 引入js顺序 common.js是需要依赖axios

da-dalin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SAAS-HRM-注册中心前台

前台实现授权中心(用户中心):有统一的登录界面登录实现:login(){ //4.发送ajax请求 this.$http.post("/user/sso/login",this.formParams).then(res=>{ ...
复制链接

扫一扫