Vue實現單點登入控制元件的完整程式碼
阿新 • • 發佈：2021-11-07
這裡提供一個單點登入的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 '-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();
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',com' })//寫上你的網站主域名
Cookies.set('app.loginname',com' })//寫上你的網站主域名
this.$router.go(0)
},com' })//寫上你的網站主域名
window.open(returl,"_parent");
}else{
}
},}
}
</script&
登入系統完成後，我們的步驟已經完成一半，接下來是呼叫端的元件製造及呼叫方法，這裡給大家展示我的案例控制元件程式碼
<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:'',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','本地路由',com' })//寫上你的網站主域名
window.open('登陸系統地址',"_parent");
}
break;
case 'logout':
Cookies.set('app.token',com' })//寫上你的網站主域名
Cookies.set('app.loginname',com' })//寫上你的網站主http://www.cppcns.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:{
http://www.cppcns.com 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單點登入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！