- A+
所属分类：Web前端
这里提供一个Vue单点登录的demo给大家参考，希望对想了解的朋友有一些帮助。
具体的原理大家可以查看我的上篇文章
vue实现单点登录的N种方式
废话不多少直接上代码
这里分两套系统，一是登录系统的主体端，我们所有子系统或者关联系统的登录流程，全部在这里完成
具体代码如下：
login.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="handleLogin">点击登录</button> <button @click="rethome">返回之前页面</button> </div> </template> <script> import Cookies from 'js-cookie' export default { name: 'home', data () { return { msg: '系统一：统一登录页面', } }, mounted(){ const token = Cookies.get('app.token'); if(token){ this.rethome(); } }, methods: { handleLogin() { var token = this.randomString(); Cookies.set('app.token',token, { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 if(Cookies.get('app.returl')){ Cookies.set('app.loginname','系统二', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 }else{ Cookies.set('app.loginname','系统一', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 } this.rethome(); }, rethome(){ var returl = Cookies.get('app.returl'); if(returl){ Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 window.open(returl,"_parent"); }else{ this.$router.push("/"); } }, randomString(e) { e = e || 32; var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678", a = t.length, n = ""; for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a)); return n } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
home.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <h3>用户信息为：{{token}}</h3> <h3>登录地点：{{loginname}}</h3> <button @click="logout">登出</button> </div> </template> <script> import Cookies from 'js-cookie' export default { name: 'home', data () { return { msg: '系统一主页面', token:'', loginname:'' } }, mounted(){ const token = Cookies.get('app.token'); this.token = token; const loginname = Cookies.get('app.loginname'); this.loginname = loginname; console.log(token); if(!token){ this.$router.push("/login"); }else{ this.rethome() } }, methods: { logout(){ Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 this.$router.go(0) }, rethome(){ var returl = Cookies.get('app.returl'); if(returl){ Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 window.open(returl,"_parent"); }else{ } }, } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
登录系统完成后，我们的步骤已经完成一半，接下来是调用端的组件制造及调用方法，这里给大家展示我的案例
控件代码
<template> <div class="hello" v-show="false"> </div> </template> <script> import Cookies from 'js-cookie' export default { props:{ type:{ type:String, default:'getdata' } }, name: 'home', data () { return { token:'', loginname:'' } }, mounted(){ const token = Cookies.get('app.token'); this.token = token?token:'未登陆'; const loginname = Cookies.get('app.loginname'); this.loginname = loginname?loginname:'未登陆'; this.returnFun() }, methods: { returnFun(){ var data = { token:this.token, loginname:this.loginname } this.$emit("clickFun",data); } }, watch: { 'type': function (val) { const token = Cookies.get('app.token'); this.token = token?token:'未登陆'; const loginname = Cookies.get('app.loginname'); this.loginname = loginname?loginname:'未登陆'; switch(val){ case 'login': console.log(token); if(token !=''){ this.returnFun(); }else{ Cookies.set('app.returl','本地路由', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 window.open('登陆系统地址',"_parent"); } break; case 'logout': Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名 Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名; this.token = '未登陆'; this.loginname ='未登陆'; this.returnFun(); break; case 'getdata': this.returnFun(); break; } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
调用端代码案例如下：
<template> <div class="hello"> <login @clickFun="returnFun" :type ="type"></login> <h1>{{ msg }}</h1> <h3>用户信息为：{{token}}</h3> <h3>登录地点：{{loginname}}</h3> <button @click="login">登陆</button> <button @click="logout">登出</button> </div> </template> <script> import Cookies from 'js-cookie' import login from '@/pages/login' export default { name: 'home', data () { return { msg: '系统二:父组件页面', token:'未登陆', loginname:'未登陆', type:'getdata', } }, mounted(){ }, methods: { login(){ this.type = "login"; }, logout(){ this.type = "logout"; }, returnFun(value){ console.log(value,"子组件返回值") const token = value.token; this.token = token?token:'未登陆'; const loginname = value.loginname; this.loginname = loginname?loginname:'未登陆'; } }, components:{ login } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
到这里，一个简易单点登录系统的搭建已经完成，大家可以照着这个思路，继续完善最终制作成对应的控件。
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
