关键词搜索

源码搜索 ×
×

Vue单点登录控件代码分享

发布2021-08-04浏览640次

详情内容

废话不多少直接上代码

这里分两套系统，一是登录python教程系统c#教程的主体端，我们所有子系统或者关联系统的登录流程，全部在这里完成

具体代码如下：

login.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<template>

  <divclass="hello">

    <h1>{{ msg }}</h1>

    <button @click="handleLogin">点击登录</button>

    <button @click="rethome">返回之前页面</button>

  </div>

</template>

<script>

import Cookiesfrom 'js-cookie'

exportdefault {

  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 tothis 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<template>

  <divclass="hello">

    <h1>{{ msg }}</h1>

    <h3>用户信息为：{{token}}</h3>

    <h3>登录地点：{{loginname}}</h3>

    <button @click="logout">登出</button>

  </div>

</template>

<script>

import Cookiesfrom 'js-cookie'

exportdefault {

  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 tothis 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>

登录系统完成后，我们的步骤已经完成一半，接下来是调用端的组件制造及调用方法，这里给大家展示我的案例

控件代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

<template>

  <divclass="hello" v-show="false">

  </div>

</template>

<script>

import Cookiesfrom 'js-cookie'

exportdefault {

  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 tothis 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>

调用端代码案例如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<template>

  <divclass="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 Cookiesfrom 'js-cookie'

import loginfrom '@/pages/login'

exportdefault {

  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 tothis 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>

到这里，一个简易单点登录系统的搭建已经完成，大家可以照着这个思路，继续完善最终制作成对应的控件。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载