快捷導(dǎo)航

Vue實現(xiàn)單點登錄控件的完整代碼

更新時間：2021年11月05日 09:41:17 作者：林恒

這里提供一個Vue單點登錄的demo給大家參考，對Vue實現(xiàn)單點登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧

這里提供一個Vue單點登錄的demo給大家參考，希望對想了解的朋友有一些幫助。具體的原理大家可以查看我的上篇文章

vue實現(xiàn)單點登錄的N種方式廢話不多少直接上代碼這里分兩套系統(tǒng)，一是登錄系統(tǒng)的主體端，我們所有子系統(tǒng)或者關(guān)聯(lián)系統(tǒng)的登錄流程，全部在這里完成

具體代碼如下：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: '系統(tǒng)一：統(tǒng)一登錄頁面',
    }
  },
  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' })//寫上你的網(wǎng)站主域名
        if(Cookies.get('app.returl')){
          Cookies.set('app.loginname','系統(tǒng)二', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
        }else{
          Cookies.set('app.loginname','系統(tǒng)一', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
        }
        this.rethome();
    },
    rethome(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
           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: '系統(tǒng)一主頁面',
      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' })//寫上你的網(wǎng)站主域名
        Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
        this.$router.go(0)
    },
    rethome(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
          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>

登錄系統(tǒng)完成后，我們的步驟已經(jīng)完成一半，接下來是調(diào)用端的組件制造及調(diào)用方法，這里給大家展示我的案例控件代碼

<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' })//寫上你的網(wǎng)站主域名
            window.open('登陸系統(tǒng)地址',"_parent");
          }
          break;
          case 'logout':
          Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名
          Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//寫上你的網(wǎng)站主域名;
          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>

調(diào)用端代碼案例如下：

<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: '系統(tǒng)二:父組件頁面',
      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>

到這里，一個簡易單點登錄系統(tǒng)的搭建已經(jīng)完成，大家可以照著這個思路，繼續(xù)完善最終制作成對應(yīng)的控件。如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進步。

到此這篇關(guān)于Vue單點登錄控件代碼分享的文章就介紹到這了,更多相關(guān)Vue單點登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: