脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue单点登录

Vue实现单点登录控件的完整代码

 更新时间：2021年11月05日 09:41:17   作者：林恒  
这里提供一个Vue单点登录的demo给大家参考，对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>

到这里，一个简易单点登录系统的搭建已经完成，大家可以照着这个思路，继续完善最终制作成对应的控件。如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

到此这篇关于Vue单点登录控件代码分享 的文章就介绍到这了,更多相关Vue单点登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 前端vue3树形组件使用代码示例

    前端vue3树形组件使用代码示例

    最近在开发时遇到一个问题,是在输入框里面放一个树形组件,这篇文章主要给大家介绍了关于前端vue3树形组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • Vue3基于 rem 比例缩放方案示例详解

    Vue3基于 rem 比例缩放方案示例详解

    这篇文章主要介绍了Vue3基于rem比例缩放方案,本缩放方案置于hooks中即可，文中通过示例代码介绍了vue-cli3 中使用rem布局的方法，需要的朋友可以参考下
    2023-05-05
  • vue2.0 资源文件assets和static的区别详解

    vue2.0 资源文件assets和static的区别详解

    这篇文章主要介绍了vue2.0 资源文件assets和static的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue3+ts中ref与reactive指定类型实现示例

    vue3+ts中ref与reactive指定类型实现示例

    这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • vue项目配置国际化$t('')的介绍和用法示例

    vue项目配置国际化$t('')的介绍和用法示例

    这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下
    2023-09-09
  • 详解vue-cli构建项目反向代理配置

    详解vue-cli构建项目反向代理配置

    本篇文章主要介绍了详解vue-cli构建项目反向代理配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vsCode一键生成vue模板

    vsCode一键生成vue模板

    之前关于vsCode一键生成vue模，最近需要回顾，就顺便发到随笔上了，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 动态实现element ui的el-table某列数据不同样式的示例

    动态实现element ui的el-table某列数据不同样式的示例

    这篇文章主要介绍了动态实现element ui的el-table某列数据不同样式的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    下面小编就为大家带来一篇Vue.js实现网格列表布局转换方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue 单页应用和多页应用的优劣

    vue 单页应用和多页应用的优劣

    这篇文章主要介绍了vue 单页应用和多页应用的优劣，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-10-10

最新评论