浏览器中子域名之间共享cookie

有多个网站的使用同一套用户密码的时候就可以在一端登录后其他端就不用重复登录。
主要就是通过cookie存在顶级域名下子域名也可以获取。

方便操作cookie 使用 js-cookie 这个包

npm i js-cookie

写入：

Cookies.set(‘name’, ‘value’)
Cookies.set(‘name’, ‘value’, { expires: 7 })
Cookies.set(‘name’, ‘value’, { expires: 7, path: ‘’ })
Cookies.set(‘name’, ‘value’, { domain: ‘localhost’ });

读取：

Cookies.get(‘name’)
Cookies.get(‘name’, { domain: ‘localhost’ })

删除：

Cookies.remove(‘name’)
Cookies.remove(‘name’, { path: ‘’, domain: ‘.localhost’ })

存储cookie后只需要在一个全局路由守卫中去进行认证

router.beforeEach((to, from, next) => {
  const token= Cookies.get('token', { domain: 'localhost' })
  if (!token&& to.path !== '/auth') {
    next({ name: 'auth' })
  } else if (to.path === '/auth' && token) {
    next({ name: 'home' })
  } else {
    next()
  }
})
1
2
3
4
5
6
7
8
9
10

登录后存储

const submit = () => {
  if (Cookies.get('staticAuthtoken', { domain: 'localhost' })) {
    router.push('/')
  }
  else if (password.value === 'admin@liandanxia') {
    ElMessage.success('验证成功！')
    router.push('/')
    Cookies.set('token', 'token', { domain: 'localhost' });
  } else {
    ElMessage.error('密码错误！')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12