Vue complete code to implement single sign-on control

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

Recommend

Examples of simple add, delete, modify, and query operations using mysql statements

This article uses examples to describe how to use...

React-Native environment setup and basic introduction

Environment Preparation 1. Environment Constructi...

Example of using CSS3 to customize the style of input multiple-select box

Principle: First hide the input element, then use...

vue.config.js packaging optimization configuration

The information on Baidu is so diverse that it...

Limiting the number of short-term accesses to a certain IP based on Nginx

How to set a limit on the number of visits to a c...

$nextTick explanation that you can understand at a glance

Table of contents 1. Functional description 2. Pa...

Introduction to nesting rules of html tags

There are many XHTML tags: div, ul, li, dl, dt, d...

Implementing a simple carousel based on JavaScript

This article shares the specific code of JavaScri...

Problems and solutions for installing Docker on Alibaba Cloud

question When installing Docker using Alibaba Clo...

React passes parameters in several ways

Table of contents Passing parameters between pare...

JavaScript example code to determine whether a file exists

1. Business Scenario I have been doing developmen...

JavaScript function call classic example code

Table of contents JavaScript function call classi...

Summary of the use of CSS scope (style splitting)

1. Use of CSS scope (style division) In Vue, make...

Solution to the failure of remote connection to MySQL database in Linux configuration

Today I have a question about configuring MySQL d...

CSS to achieve horizontal lines on both sides of the middle text

1. The vertical-align property achieves the follo...