前后端分离，vue前端实现单点登录

平时在很多的项目中都会用到单点登录功能，比如学校、大型医院里有很多的系统，学校或医院希望从一个登录入口就可以进入到所有的系统中、不用每个系统都搞一个登录

下面来说说vue项目中是如何实现的吧，（当然后端也是需要配置的，这里只说前端部分）

第一、拦截器，在util.js里设置拦截器，用户重复登录时让他重新登录，跳回到项目的第三方登录页面代码如下：

util.ajax.interceptors.response.use(function (response) { 
    //重定向到登录页面 
    if (response.data.code== '401'){ 
    	localStorage.clear() 
    	    if(!response.data.url==""){
    		    window.location.href=response.data.url//这个url需要后端设置成公用的登录页url
    	    }else{
    		    window.location.href=response.data.msg
    	    }

	    }else{
	    	console.info(response.data)
	    }
	    return response 
	}, function (error) { 
	    return Promise.reject(error) 
});

第二，在LOGIN页引入Cookies，通过cookie获取用户信息然后进行验证

import Cookies from "js-cookie";

第三，在页面初始化时调用

第四、在方法里设置好ticket并设置好Cookies权限

第二、三、四的代码如下：

<script>
import Cookies from "js-cookie";
export default {
  created() {
	 this.getQueryString()
  },
  methods: {
    getQueryString(){
		var reg = new RegExp("(^|&)" + 'ticket' + "=([^&]*)(&|$)", "i"); 
        var r = window.location.search.substr(1).match(reg); 
        var url = 'cas/login';
        if(r != null) url = url +'?ticket=' +unescape(r[2]);//后台设置好相应的ticket
        this.get(url).then(data =>{
        	if(data.code == 401){
        		window.location.href=data.url;
        	}else{
        		Cookies.set("ticket", data.ticket);
        		Cookies.set("token", data.token);
        		this.ajax.defaults.headers.ticket = data.ticket;
        		 Cookies.set("user", data.data);
                  if(data.userInfo.teachInfo.roleName=="校管理"){
                    Cookies.set('access', 2);//设置权限
                    this.$router.push({ name: "home_index" });//页面跳转到首页
                  }else if(data.userInfo.teachInfo.roleName=="院管理"){
                    Cookies.set('access', 1);//设置权限
                    this.$router.push({ name: "home_index" });//页面跳转到首页
                  }else if(data.userInfo.teachInfo.roleName=="辅导员"){
                    Cookies.set('access', 0);//设置权限辅导员
                    this.$router.push({ name: "studentmgt_index" });//页面跳转到学生管理页面
                  }else{
                  	Cookies.set('access', 3);//设置权限其他
                  	this.$router.push({ name: "home_index" });
                  }
             
        	}
        })

	},
  }      
}
</script>