Vue complete code to implement single sign-on control

Here is a Vue single sign-on demo for your reference, I hope it will be helpful to those who want to know more. For the specific principle, you can refer to my previous article

There are N ways to implement single sign-on in vue. There are two systems here. One is the main end of the login system. The login process of all our subsystems or related systems is completed here.

The specific code is as follows: login.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">Click to log in</button>
    <button @click="rethome">Return to the previous page</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
export default {
  name: 'home',
  data () {
    return {
      msg: 'System 1: unified login page',
    }
  },
  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' }) //Write your website's main domain name if(Cookies.get('app.returl')){
          Cookies.set('app.loginname','System 2', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name}else{
          Cookies.set('app.loginname','System 1', { expires: 1000, path: '/',domain: '.xxx,com' }) //Write your website's main domain name}
        this.rethome();
    },
    return(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name 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>User information: {{token}}</h3>
    <h3>Login location: {{loginname}}</h3>
    <button @click="logout">Logout</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
 
export default {
  name: 'home',
  data () {
    return {
      msg: 'System 1 main page',
      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.rehome()
    }
  },
  methods: {
    logout(){
        Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain nameCookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain namethis.$router.go(0)
    },
    return(){
      var returl = Cookies.get('app.returl');
        if(returl){
          Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name 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>

After logging into the system, we have completed half of the steps. The next step is to create components and call methods on the calling end. Here I will show you my case control code.

<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:'Not logged in';
    const loginname = Cookies.get('app.loginname');
    this.loginname = loginname?loginname:'Not logged in';
    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:'Not logged in';
        const loginname = Cookies.get('app.loginname');
        this.loginname = loginname?loginname:'Not logged in';
        switch(val){
          case 'login':
          console.log(token);
          if(token != ''){
            this.returnFun();
          }else{
            Cookies.set('app.returl','Local route', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name window.open('Login system address',"_parent");
          }
          break;
          case 'logout':
          Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//Write your website's main domain name;
          this.token = 'Not logged in';
          this.loginname = 'Not logged in';
          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>

The calling code example is as follows:

<template>
  <div class="hello">
    <login @clickFun="returnFun" :type ="type"></login>
    <h1>{{ msg }}</h1>
    <h3>User information: {{token}}</h3>
    <h3>Login location: {{loginname}}</h3>
    <button @click="login">Log in</button>
    <button @click="logout">Logout</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
import login from '@/pages/login'
 
export default {
  name: 'home',
  data () {
    return {
      msg: 'System 2: Parent component page',
      token:'Not logged in',
      loginname:'Not logged in',
      type:'getdata',
    }
  },
  mounted(){
  },
  methods: {
    login(){
      this.type = "login";
    },
    logout(){
      this.type = "logout";
    },
    returnFun(value){
        console.log(value,"subcomponent return value")
                const token = value.token;
        this.token = token?token:'Not logged in';
        const loginname = value.loginname;
        this.loginname = loginname?loginname:'Not logged in';
        }
  },
  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>

At this point, the construction of a simple single sign-on system has been completed. You can follow this idea to continue to improve and finally make the corresponding control. If it is helpful to you, you are welcome to follow me. I will update the technical documentation regularly so that we can discuss and learn together and make progress together.

This is the end of this article about sharing Vue single sign-on control code. For more relevant Vue single sign-on content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Summary of ways to implement single sign-on in Vue
SpringBoot+Vue+Redis implements single sign-on (login in one place and log out in another place)
Use springboot combined with vue to implement sso single sign-on
Vue+springboot front-end and back-end separation to achieve single sign-on cross-domain problem solution

<<: MySQL batch adding and storing method examples

>>: User needs lead to marketing-oriented design