Vue實現單點登錄控件的完整代碼
這裡提供一個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>
到這裡,一個簡易單點登錄系統的搭建已經完成,大傢可以照著這個思路,繼續完善最終制作成對應的控件。如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大傢一起討論學習,一起進步。
到此這篇關於Vue單點登錄控件代碼分享 的文章就介紹到這瞭,更多相關Vue單點登錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!