Vue單點登錄控制項程式碼分享
- 2021 年 8 月 4 日
- 筆記
- vue知識分享
這裡提供一個Vue單點登錄的demo給大家參考，希望對想了解的朋友有一些幫助。
具體的原理大家可以查看我的上篇文章
廢話不多少直接上程式碼
這裡分兩套系統，一是登錄系統的主體端，我們所有子系統或者關聯繫統的登錄流程，全部在這裡完成
具體程式碼如下：
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>
到這裡，一個簡易單點登錄系統的搭建已經完成，大家可以照著這個思路，繼續完善最終製作成對應的控制項。
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
