vue2.0实现单点登录思路以及简单代码 |
您所在的位置:网站首页 › 如何实现单点登录 › vue2.0实现单点登录思路以及简单代码 |
首先单点登录简单来说就是不走自己的登录页走三方的登录系统,然后通过重定向回到自己的系统中,那么就需要有三个必须参数 1.三方的登录地址 2.重定向回到系统的地址 3.三方系统获得的token令牌 一切准备就绪后 开始着手码代码了 首先在导航守卫中进行鉴权,当用户想要跳转一个不在白名单中的页面时,判断当前用户是否携带了token,如果携带token则正常跳转,如果没有携带token则重定向至三方登录页面。 在跳转至三方页面时将登录后的重定向回来的地址拼接到地址栏。这样在三方的登录页面登陆成功后,会在地址栏携带用户的code,跳转至本项目的承接页。 承接页,顾名思义就是用于两个系统的承接。在跳转会承接页后可以用this.$router.query函数将地址栏携带的参数拿到,调用后端接口 获取本系统颁发的小token。 承接页基本没啥 代码自取
import operatorToken from '@/utils/data.token' export default { name: 'bridge', data () { return { } }, created () { this.init() }, methods: { async init () { var po = this.$route.query.code var [err, result] = await this.$to(this.$api.Permission.getToken(po)) if (err || result.returnCode !== 1) { return false } var bigToken = result.data.oneAccessToken var token = result.data.accessToken operatorToken.set(bigToken, token) this.$router.push({ name: 'dashboard' }) } } } 将接口获取的大小token都存到localStorage中方便后续使用。跳转首页 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |