您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

谷粒学院------单点登录功能

登录业务模式

1.单一服务器模式

早起单一服务器,用户认证。通过对session域的设置

2.SSO,单点登录模式

分布式,SSO模式

优点:

(1)用户身份信息独立管理,更好地分布式管理。

(2)可以自己扩展安全策略

缺点:

认证服务器访问压力较大

3 常用的单点登录模式

(1) session广播域机制实现 session复制 缺点是消耗的资源过大(不推荐使用)

(2)使用cookie+ redis实现

- --在项目中任何一个模块进行登录以后,把数据放到两个地方

redis:在key,生成唯一随机值(ip,用户id等等) ,在value :用户数据

cookie:在redis里面生成key值,放到cookie里面

-----访问项目中其他模块,发送请求你带着cookie进行发送,获取cookie值,拿着cookie做事情

把cookie获取值,到redis里面进行查询,根据key进行查询,如果查询到数据就是登录

(3)使用token(令牌)实现

1.在项目某个模块进行登录,登录之后,按照规则生成字符串,把登陆之后用户包含到生成字符串里面,把字符串返回

-可以把字符串通过cookie返回

-把字符串通过地址栏返回

2.再去访问项目的其他木块,每次访问在地址栏带着生成字符串,在访问模块里面获取地址栏字符串,根据字符串获取用户信息,如果可以获取的到,就是登录

image-20210305111152108

 login.js

import request from '@/utils/request'
export default {
    //登录
    submitLoginUser(userInfo) {
        return request({
            url: `/educenter/member/login`,
            method: 'post',
            data: userInfo
        })
    },
    //根据token获取用户信息
    getLoginUserInfo() {
        return request({
            url: `/educenter/member/getMemberInfo`,
            method: 'get'
        })
    }
}

把login.js引入到login.vue

1.开启第一步操作,调用接口登录返回的token字符串

2.把第一部返回token字符串放到cookie里面(记得引入js-cookie)

login.vue


<script>
  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'

  import cookie from '~/node_modules/js-cookie'
  import loginApi from '@/api/login'

  export default {
    layout: 'sign',

    data () {
      return {
        //封装登录手机号和密码对象
        user:{
          mobile:'',
          password:''
        },
        //用户信息
        loginInfo:{}
      }
    },

    methods: {
      //登录的方法
      //第一步 调用接口登录返回token字符串
      submitLogin(){
          loginApi.submitLoginUser(this.user)
            .then(response =>{
                //第二步 字符串放到cookie里面
                //第一个参数:cookie名称,第二个参数:参数的值,第三个参数:参数的作用范围
                cookie.set('guli_token',response.data.data.token,{domain:'localhost'})

     checkPhone (rule, value, callback) {
        //debugger
        if (!(/[1-9]\d{7,10}@qq\.com$/.test(value))) {
          return callback(new Error('邮箱格式不正确'))
        }
        return callback()
      }
    }
  }
</script>
<style>
   .el-form-item__error{
    z-index: 9999999;
  }
</style>

3.创建前端拦截器

判断cookie里面是否有token字符串,如果有,把token字符安川放到header(jwt请求头)

request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui';
import cookie from 'js-cookie';
//创建axios实例
const service = axios.create({
    baseURL: 'http://localhost:9001', //api的base_url
    timeout: 20000 //请求超时时间
})

//第三步 创建拦截器 http request 拦截器
service.interceptors.request.use(
    config => {
        //debugger
        //判断cookie中是否有名称叫 guli_token的数据
        if (cookie.get('guli_token')) {
            //把获取到的cookie值放到header中
            config.headers['token'] = cookie.get('guli_token');
        }
        return config
    },
    err => {
        return Promise.reject(err);
    })

export default service

4,根据token值,调用接口,根据token获取用户信息,为了首页面显示,把调用接口返回用户信息放到cookie里面

login.vue

methods: {
      //登录的方法
      //第一步 调用接口登录返回token字符串
      submitLogin(){
          loginApi.submitLoginUser(this.user)
            .then(response =>{
                //第二步 字符串放到cookie里面
                //第一个参数:cookie名称,第二个参数:参数的值,第三个参数:参数的作用范围
                cookie.set('guli_token',response.data.data.token,{domain:'localhost'})

                //第四步调用接口,根据token获取用户信息,为了页面显示
              loginApi.getLoginUserInfo()
                .then( response =>{
                    //获取返回的用户信息,放到cookie中
                    this.userInfo = JSON.stringify(response.data.data.userInfo)
                    cookie.set('guli_ucenter',this.userInfo,{domain:'localhost'})
                    //跳转页面
                  window.location.href = "/";
                })  
            })
      },

5.在首页面显示用户信息,从cookie获取用户信息,这个用户信息显示要放在公共页面

default.vue

<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";
import cookie from '~/node_modules/js-cookie'

export default {
  data() {
    return {
      token: "",
      loginInfo: {
        id: "",
        age: "",
        avatar: "",
        mobile: "",
        nickname: "",
        sex: "",
      },
    };
  },
  created() {//第五步
    this.showInfo()
  },
  methods:{
    //创建方法,从cookie获取用户信息
    showInfo(){
      //从cookie获取用户信息
       var userStr = cookie.get("guli_ucenter");
       //把字符串转成json对象形式
       //console.log(cookie)
        if (userStr&&userStr != 'underfined') {
         this.loginInfo =JSON.parse(userStr)
      }
    },
       //退出
       logout(){
         //清空cookie值
         cookie.set('guli_token','',{domain:'localhost'})
         cookie.set('guli_ucenter','',{domain:'localhost'})
         //回到首页面
         window.location.href = "/";
       }
  }
};
</script>

这里整出来好多错误,最难搞的是一个XXXXX token u in JSON at positoin的错误

跟一个大佬咨询后明白,这个登录的流程是用户登录后向后端发送登录请求,后端响应请求给前端的cookie,前端接收到后端传来的cookie解析一下就行了

这是正常流程,不正常的是一致报错XXXXX token u in JSON at positoin

解决思路:

前后端分开找

后端用swagger测登录接口是否能返回tooken,结果是能的,那就说明后端没写错

前端打印cookie,看看有没有,然后再login.vue和default.vue各下一个console.log(cookie)

发现lonig.vue没有打印出来,后来仔细分析后端包的错误

 上网查了一下,发现是jwt格式错了

后来仔细分析第四步的路径,发现写的和第一步一样(尴尬。。。。),然后改过来就行了。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进