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:
|
<<: MySQL batch adding and storing method examples
>>: User needs lead to marketing-oriented design
Recommend
Detailed explanation of dragging table columns using Vue Element Sortablejs
1. css: dragTable.css @charset "UTF-8";...
How to achieve the maximum number of connections in mysql
Table of contents What is the reason for the sudd...
Detailed explanation of three relationship examples of MySQL foreign keys
This article uses examples to describe the three ...
Native js to realize the upload picture control
This article example shares the specific code of ...
Application of CSS3 animation effects in activity pages
background Before we know it, a busy year is comi...
Writing daily automatic backup of MySQL database using mysqldump in Centos7
1. Requirements: Database backup is particularly ...
JavaScript implements simple calculator function
This article example shares the specific code of ...
MySQL data type details
Table of contents 1. Numeric Type 1.1 Classificat...
What does the "a" in rgba mean? CSS RGBA Color Guide
RGBA is a CSS color that can set color value and ...
MySQL parameter related concepts and query change methods
Preface: In some previous articles, we often see ...
A brief discussion on the problem of forgotten mysql password and login error
If you forget your MySQL login password, the solu...
How to implement on-demand import and global import in element-plus
Table of contents Import on demand: Global Import...
How to install ElasticSearch on Docker in one article
Table of contents Preface 1. Install Docker 2. In...
CSS to change the size (width, height) of the image when the mouse passes over the image hyperlink
How to change the image hyperlink when the mouse p...
How to implement simple data monitoring with JS
Table of contents Overview first step Step 2 Why ...