Vue实现单点登录控件的完整代码
时间：2022-11-10 09:22:21 | 栏目：vue | 点击：次
这里提供一个Vue单点登录的demo给大家参考，希望对想了解的朋友有一些帮助。具体的原理大家可以查看我的上篇文章
vue实现单点登录的N种方式废话不多少直接上代码这里分两套系统，一是登录系统的主体端，我们所有子系统或者关联系统的登录流程，全部在这里完成
具体代码如下：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: '系统一：统一登录页面',
}
},
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' })//写上你的网站主域名
if(Cookies.get('app.returl')){
Cookies.set('app.loginname','系统二', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
}else{
Cookies.set('app.loginname','系统一', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
}
this.rethome();
},
rethome(){
var returl = Cookies.get('app.returl');
if(returl){
Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
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: '系统一主页面',
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' })//写上你的网站主域名
Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
this.$router.go(0)
},
rethome(){
var returl = Cookies.get('app.returl');
if(returl){
Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
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>
登录系统完成后，我们的步骤已经完成一半，接下来是调用端的组件制造及调用方法，这里给大家展示我的案例控件代码
<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' })//写上你的网站主域名
window.open('登陆系统地址',"_parent");
}
break;
case 'logout':
Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名
Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//写上你的网站主域名;
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>
调用端代码案例如下：
<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: '系统二:父组件页面',
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>
到这里，一个简易单点登录系统的搭建已经完成，大家可以照着这个思路，继续完善最终制作成对应的控件。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。