Vue单点登录控件代码分享

废话不多少直接上代码

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

具体代码如下：

login.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<template>   <divclass="hello">     <h1>{{ msg }}</h1>     <button @click="handleLogin">点击登录</button>     <button @click="rethome">返回之前页面</button>   </div> </template> <script> import Cookiesfrom 'js-cookie' exportdefault {   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 tothis 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

<template>   <divclass="hello">     <h1>{{ msg }}</h1>     <h3>用户信息为：{{token}}</h3>     <h3>登录地点：{{loginname}}</h3>     <button @click="logout">登出</button>   </div> </template> <script> import Cookiesfrom 'js-cookie' exportdefault {   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 tothis 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>

登录系统完成后，我们的步骤已经完成一半，接下来是调用端的组件制造及调用方法，这里给大家展示我的案例

控件代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

<template>   <divclass="hello" v-show="false">   </div> </template> <script> import Cookiesfrom 'js-cookie' exportdefault {   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 tothis 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>

调用端代码案例如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

<template>   <divclass="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 Cookiesfrom 'js-cookie' import loginfrom '@/pages/login' exportdefault {   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 tothis 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>

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

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