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
In-depth explanation of modes and environment variables in Vue CLI
Preface In the development of actual projects, we...
A record of pitfalls in JS regular matching
I recently discovered a pitfall in regular expres...
Solution to the error when calling yum in docker container
When executing yum in dockerfile or in the contai...
Vue implements adding watermark to uploaded pictures
This article shares the specific implementation c...
Discussion on more reasonable creation rules for MySQL string indexes
Preface Regarding the use of MySQL indexes, we ha...
Implementing custom radio and check box functions with pure CSS
1. Achieve the effect 2 Knowledge Points 2.1 <...
Linux kernel device driver kernel time management notes
/****************** * Linux kernel time managemen...
Detailed description of the use of advanced configuration of Firewalld in Linux
IP masquerading and port forwarding Firewalld sup...
Vue scaffolding learning project creation method
1. What is scaffolding? 1. Vue CLI Vue CLI is a c...
Linux sar command usage and code example analysis
1. CPU utilization sar -p (view all day) sar -u 1...
sql script function to write postgresql database to implement parsing
This article mainly introduces the sql script fun...
CSS implements a pop-up window effect with a mask layer that can be closed
Pop-up windows are often used in actual developme...
Installation and deployment of Linux tool Nethogs to monitor network bandwidth by process
Overview There are many open source network monit...
MySQL 8.0.11 Installation Tutorial under Windows
This article records the installation tutorial of...
Cross-domain issues in front-end and back-end separation of Vue+SpringBoot
In the front-end and back-end separation developm...