前后端分离，vue前端实现单点登录(不跨主域)

阳光穿透心脏的1/2处 2023-06-27 03:44 12阅读 0赞

> 仅限不跨主域，什么叫不跨主域呢，也就是说xxx.主域.com ，不管是二级还是三级域名，主域永远是一个，如果跨主域的话，请看另外一篇文章。

### js-cookie ###

[https://www.npmjs.com/package/js-cookie][https_www.npmjs.com_package_js-cookie]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl_size_16_color_FFFFFF_t_70]

npm i js-cookie -S

##### A项目 #####

import Cookies from 'js-cookie'
    export default { 
    	...,
    	methods: { 
    		handleLogin() { 
    			if (res.success) { 
    				// 用户登录成功
    				// 主域替换成你们公司的域名
    				Cookies.set('app.token', res.data.token, '.主域.com')
    				Cookies.set('app.token', res.data.token, 'ip') // 记住不要加 http:// 之类的
    			}
    		}
    	}
    }

##### B项目 #####

在入口文件，比如`main.js`里面

import Cookies from 'js-cookie'
    
    const token = Cookies.get('app.token')
    // 或者说是在请求的时候获取token，在请求头里面一起给后台

### 最后 ###

为什么不跨主域可以种cookie的方式实现单点登陆，跨主域就不可以呢？这要问一下浏览器了，也主要是为了安全考虑。

[https_www.npmjs.com_package_js-cookie]: https://www.npmjs.com/package/js-cookie
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102213029787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl,size_16,color_FFFFFF,t_70