前后端分离，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权限

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