Vue單點登入控制元件程式碼分享
阿新 • • 發佈:2021-08-04
這裡提供一個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>