欢迎光临
我的个人博客网站

Vue单点登录控件代码分享


这里提供一个Vue单点登录的demo给大家参考,希望对想了解的朋友有一些帮助。

具体的原理大家可以查看我的上篇文章

vue实现单点登录的N种方式

废话不多少直接上代码

这里分两套系统,一是登录系统的主体端,我们所有子系统或者关联系统的登录流程,全部在这里完成

Vue单点登录控件代码分享

具体代码如下:

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>

到这里,一个简易单点登录系统的搭建已经完成,大家可以照着这个思路,继续完善最终制作成对应的控件。

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

Vue单点登录控件代码分享

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue单点登录控件代码分享
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏