单点登录--Token---整合JWT

最新推荐文章于 2024-04-07 17:24:12 发布

小玩偶啊

最新推荐文章于 2024-04-07 17:24:12 发布

阅读量1.2k

点赞数

分类专栏： Java 文章标签： jwt

本文链接：https://blog.csdn.net/qq_39759664/article/details/120950924

版权

Java 专栏收录该内容

67 篇文章 6 订阅

订阅专栏

1.含义：

SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。
SSO(single sign on)模式
在这里插入图片描述

优点：
用户身份信息独立管理，更好的分布式管理。
可以自己扩展安全策略
缺点：
认证服务器访问压力较大。

1.1 实现方式：

session广播机制的实现
使用cookie+redis实现
使用token的实现

1.2. session

主要是 session复制，从一个服务复制到另一个服务中

1.3. 使用cookie+redis实现

1、在项目中任何一个模块进行登录，登录之后，把数据放到两个地方

(1) redis，在key:生成唯一随机值(ip、用户id等等)，在value:用户数据
(2) cookie。把redis里面生成key值放到cookie里面

2、访间项目中其他模块，发送请求带着cookie进行发送，获取cookie值，拿着cookie做事情.(1）把cookie获取值，到redis进行查询，根据key进行查询，如果查询数据就是登录

1.4 . Token模式

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

(1)可以把字符串通过cookie返回
(2)把字符串通过地址栏返回

2、再去访间项目其他模块，每次访间在地址栏带着生成字符串，在访间模块里面获取地址栏字符串，根据字符串获取用户信息。如何可以获取到，就是登录

3、token是什么?
按照一定规则生成字符串,字符串可以包含用户信息

在这里插入图片描述

优点：
无状态： token无状态，session有状态的
基于标准化: 你的API可以采用标准化的 JSON Web Token (JWT)
缺点：
占用带宽
无法在服务器端销毁
注：基于微服务开发，选择token的形式相对较多

2. 整合jwt

2.1 使用JWT进行跨域身份验证

传统用户身份验证

Internet服务无法与用户身份验证分开。一般过程如下

用户向服务器发送用户名和密码。
验证服务器后，相关数据（如用户角色，登录时间等）将保存在当前会话中。
服务器向用户返回session_id，session信息都会写入到用户的Cookie。
用户的每个后续请求都将通过在Cookie中取出session_id传给服务器。
服务器收到session_id并对比之前保存的数据，确认用户的身份。
这种模式最大的问题是，没有分布式架构，无法支持横向扩展。

解决方案

session复制
cookie+redis
使用自包含令牌，通过客户端保存数据，而服务器不保存会话数据。 JWT是这种解决方案的代表。

2.2 JWT令牌

2.2.1 访问令牌的类型

在这里插入图片描述

2.2.2 JWT的组成

在这里插入图片描述
该对象为一个很长的字符串，字符之间通过"."分隔符分为三个子串。
每一个子串表示了一个功能块，总共有以下三个部分：JWT头、有效载荷和签名

JWT头
JWT头部分是一个描述JWT元数据的JSON对象，通常如下所示。

{
  "alg": "HS256",
  "typ": "JWT"
}

在上面的代码中，alg属性表示签名使用的算法，默认为HMAC SHA256（写为HS256）；typ属性表示令牌的类型，JWT令牌统一写为JWT。最后，使用Base64 URL算法将上述JSON对象转换为字符串保存。

有效载荷

有效载荷部分，是JWT的主体内容部分，也是一个JSON对象，包含需要传递的数据。 JWT指定七个默认字段供选择。

iss：发行人
exp：到期时间
sub：主题
aud：用户
nbf：在此之前不可用
iat：发布时间
jti：JWT ID用于标识该JWT

除以上默认字段外，我们还可以自定义私有字段，如下例：

{
  "sub": "1234567890",
  "name": "Helen",
  "admin": true
}

请注意，默认情况下JWT是未加密的，任何人都可以解读其内容，因此不要构建隐私信息字段，存放保密信息，以防止信息泄露。JSON对象也使用Base64 URL算法转换为字符串保存。

签名哈希
签名哈希部分是对上面两部分数据签名，通过指定的算法生成哈希，以确保数据不会被篡改。
首先，需要指定一个密码（secret）。该密码仅仅为保存在服务器中，并且不能向用户公开。然后，使用标头中指定的签名算法（默认情况下为HMAC SHA256）根据以下公式生成签名。
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(claims), secret)
在计算出签名哈希后，JWT头，有效载荷和签名哈希的三个部分组合成一个字符串，每个部分用"."分隔，就构成整个JWT对象。

2.2.3 JWT的原则

JWT的原则是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，如下所示。

{
  "sub": "1234567890",
  "name": "Helen",
  "admin": true
}

之后，当用户与服务器通信时，客户在请求中发回JSON对象。服务器仅依赖于这个JSON对象来标识用户。为了防止用户篡改数据，服务器将在生成对象时添加签名。服务器不保存任何会话数据，即服务器变为无状态，使其更容易扩展。

2.2.4 JWT的用法

客户端接收服务器返回的JWT，将其存储在Cookie或localStorage中。
此后，客户端将在与服务器交互中都会带JWT。如果将它存储在Cookie中，就可以自动发送，但是不会跨域，因此一般是将它放入HTTP请求的Header Authorization字段中。当跨域时，也可以将JWT被放置于POST请求的数据主体中。

2.2.5 JWT问题和趋势

JWT不仅可用于认证，还可用于信息交换。善用JWT有助于减少服务器请求数据库的次数。
生产的token可以包含基本信息，比如id、用户昵称、头像等信息，避免再次查库
存储在客户端，不占用服务端的内存资源
JWT默认不加密，但可以加密。生成原始令牌后，可以再次对其进行加密。
当JWT未加密时，一些私密数据无法通过JWT传输。
JWT的最大缺点是服务器不保存会话状态，所以在使用期间不可能取消令牌或更改令牌的权限。也就是说，一旦JWT签发，在有效期内将会一直有效。
JWT本身包含认证信息，token是经过base64编码，所以可以解码，因此token加密前的对象不应该包含敏感信息，一旦信息泄露，任何人都可以获得令牌的所有权限。为了减少盗用，JWT的有效期不宜设置太长。对于某些重要操作，用户在使用时应该每次都进行进行身份验证。
为了减少盗用和窃取，JWT不建议使用HTTP协议来传输代码，而是使用加密的HTTPS协议进行传输。

2.3 整合JWT令牌

2.3.1 添加依赖

<dependencies>
    <!-- JWT-->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
    </dependency>
</dependencies>

2.3.2 创建JWT工具类

package com.tjk.commonutils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import java.util.Date;

/**
 * @author kunkun
 * @since 2019/10/16
 */
public class JwtUtils {

    //常量
    public static final long EXPIRE = 1000 * 60 * 60 * 24; //token过期时间
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO"; //秘钥

    //生成token字符串的方法
    public static String getJwtToken(String id, String nickname){

        String JwtToken = Jwts.builder()
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")

                .setSubject("guli-user")
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))

                .claim("id", id)  //设置token主体部分 ，存储用户信息
                .claim("nickname", nickname)

                .signWith(SignatureAlgorithm.HS256, APP_SECRET)
                .compact();

        return JwtToken;
    }

    /**
     * 判断token是否存在与有效
     * @param jwtToken
     * @return
     */
    public static boolean checkToken(String jwtToken) {
        if(StringUtils.isEmpty(jwtToken)) return false;
        try {
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 判断token是否存在与有效
     * @param request
     * @return
     */
    public static boolean checkToken(HttpServletRequest request) {
        try {
            String jwtToken = request.getHeader("token");
            if(StringUtils.isEmpty(jwtToken)) return false;
            Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    /**
     * 根据token字符串获取会员id
     * @param request
     * @return
     */
    public static String getMemberIdByJwtToken(HttpServletRequest request) {
        String jwtToken = request.getHeader("token");
        if(StringUtils.isEmpty(jwtToken)) return "";
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("id");
    }
}

3. 应用

3.1 新建模块

这里注册使用了阿里云的短信服务
点击查看点一点
在这里插入图片描述

3.2 配置application.properties

#服务端口
server.port=8006
#服务名
spring.application.name=service-ucenter

#环境设置：dev、test、prod
spring.profiles.active=dev


# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=root

#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/tjk/educenter/mapper/xml/*.xml

spring.redis.host=127.0.0.1
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000


spring.redis.lettuce.pool.max-active=20
spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
spring.redis.lettuce.pool.max-idle=5
spring.redis.lettuce.pool.min-idle=0

#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

3.3 创建登录和注册接口

1. 创建LoginVo和RegisterVo用于数据封装LoginVo

@Data
@ApiModel(value="登录对象", description="登录对象")
public class LoginVo {
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "密码")
    private String password;
}

@Data
public class RegisterVo {
    @ApiModelProperty(value = "昵称")
    private String nickname;
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "密码")
    private String password;
    @ApiModelProperty(value = "验证码")
    private String code;
}

2. 创建controller编写登录和注册方法

@RestController
@CrossOrigin
@RequestMapping("/educenter/member")
@Api(description="用户的登录和注册")
public class UcenterMemberController {

    @Autowired
    private UcenterMemberService memberService;

    //登录
    @PostMapping("login")
    @ApiOperation("用户登录")
    public R loginUser(@RequestBody UcenterMember ucenterMember){
        //调用service登录
       String token= memberService.login(ucenterMember);

       return R.ok().data("token",token);

    }

    //注册
    @PostMapping("register")
    @ApiOperation("用户的注册")
    public R registerUser(@RequestBody RegisterVo registerVo){
        memberService.register(registerVo);
        return R.ok();
    }
    //根据token获取用户的信息
    @GetMapping("getmemberInfo")
    public R getmemberInfo(HttpServletRequest request){
        //调用jwt工具类，根据request对象获取头部信息
        //获的用户的id
        String memberId = JwtUtils.getMemberIdByJwtToken(request);
        UcenterMember ucenterMember = memberService.getById(memberId);
        return R.ok().data("userInfo",ucenterMember);
    }

}

服务层

@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {

    @Autowired
    private RedisTemplate<String,String> redisTemplate;

    @Override
    public String login(UcenterMember ucenterMember) {
        System.out.println("登陆了、、、、、、、、、、、、、、、");
        String mobile=ucenterMember.getMobile();
        String password=ucenterMember.getPassword();
        if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)){
            throw new GuliException(20001,"登陆失败");
        }
        //判断手机号是否正确
        QueryWrapper<UcenterMember> queryWrapper = new QueryWrapper();
        queryWrapper.eq("mobile",mobile);
        UcenterMember mobileMember = baseMapper.selectOne(queryWrapper);
        if(mobileMember==null){
            throw new GuliException(20001,"手机号不存在");
        }
        //进行MD5加密密码
        if(!mobileMember.getPassword().equals(MD5.encrypt(password))){
            throw new GuliException(20001,"密码错误");
        }//判断用户是否被禁用
        if(mobileMember.getIsDisabled()){
            throw new GuliException(20001,"已被禁用");
        }
        //登录成功
        String jwtToken = JwtUtils.getJwtToken(mobileMember.getId(), mobileMember.getNickname());
        return jwtToken;
    }

    @Override
    public void register(RegisterVo registerVo) {
        String code = registerVo.getCode();
        String mobile = registerVo.getMobile();
        String nickname = registerVo.getNickname();
        String password = registerVo.getPassword();
        if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(code)||StringUtils.isEmpty(password)||StringUtils.isEmpty(nickname)){
            throw new GuliException(20001,"注册失败（有空值）");
        }
        //判断验证码
        String redisCode = redisTemplate.opsForValue().get(mobile);
        //因阿里云的短信服务没申请成功，所以此处校验取消
      /*  if(!code.equals(redisCode)){
            throw new GuliException(20001,"验证码错误");
        }*/
        QueryWrapper<UcenterMember> wrapper = new QueryWrapper<>();
        wrapper.eq("mobile",mobile);
        Integer integer = baseMapper.selectCount(wrapper);
        if(integer>=1){
            throw new GuliException(20001,"手机号已存在");
        }
        UcenterMember member = new UcenterMember();
        member.setMobile(mobile);
        member.setNickname(nickname);
        member.setPassword(MD5.encrypt(password));
        member.setIsDisabled(false);
        member.setAvatar("https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto");
        //数据添加到数据库中
        baseMapper.insert(member);
    }
}

3.4 前端接口调用

在这里插入图片描述

注意下面的拦截器

request.js

import axios from 'axios'
import cookie from 'js-cookie'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001', // api 的 base_url
  timeout: 20000 // 请求超时时间
})
//每次请求的拦截器
service.interceptors.request.use(
  config => {
   if(cookie.get('guli_token')){
     config.headers['token']=cookie.get('guli_token')
   }
   return config
 },
 err=>{
   return Promise.reject(err)
 })
 
 export default service

<template>
  <div class="main">
    <div class="title">
      <a class="active" href="/login">登录</a>
      <span>·</span>
      <a href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <el-form ref="userForm" :model="user">

        <el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div >
            <el-input type="text" placeholder="手机号" v-model="user.mobile"/>
            <i class="iconfont icon-phone" />
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="密码" v-model="user.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>

        <div class="btn">
          <input type="button" class="sign-in-button" value="登录" @click="submitLogin()">
        </div>
      </el-form>
      <!-- 更多登录方式 -->
      <div class="more-sign">
        <h6>社交帐号登录</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" href="http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>

  </div>
</template>

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

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

  export default {
    layout: 'sign',

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

    methods: {
      //登录的方法
      submitLogin() {
        //第一步 调用接口进行登录，返回token字符串
        loginApi.submitLoginUser(this.user) 
           .then(response => {
             //第二步 获取token字符串放到cookie里面
             //第一个参数cookie名称，第二个参数值，第三个参数作用范围
             cookie.set('guli_token',response.data.data.token,{domain: 'localhost'})
             
              //第四步 调用接口 根据token获取用户信息，为了首页面显示
              loginApi.getLoginUserInfo()
                .then(response => {
                // this.loginInfo = response.data.data.userInfo
                  this.loginInfo =JSON.stringify(response.data.data.userInfo)
                  //获取返回用户信息，放到cookie里面
                  cookie.set('guli_ucenter',this.loginInfo,{domain: 'localhost'})

                  //跳转页面
                  window.location.href = "/";
                })
           })
      },
      checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          return callback(new Error('手机号码格式不正确'))
        }
        return callback()
      }
    }
  }
</script>
<style>
   .el-form-item__error{
    z-index: 9999999;
  }
</style>

<template>
    <div class="main">
      <div class="title">
        <a href="/login">登录</a>
        <span>·</span>
        <a class="active" href="/register">注册</a>
      </div>
  
      <div class="sign-up-container">
        <el-form ref="userForm" :model="params">
  
          <el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]">
            <div>
              <el-input type="text" placeholder="你的昵称" v-model="params.nickname"/>
              <i class="iconfont icon-user"/>
            </div>
          </el-form-item>
  
          <el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
            <div>
              <el-input type="text" placeholder="手机号" v-model="params.mobile"/>
              <i class="iconfont icon-phone"/>
            </div>
          </el-form-item>
  
          <el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
            <div style="width: 100%;display: block;float: left;position: relative">
              <el-input type="text" placeholder="验证码" v-model="params.code"/>
              <i class="iconfont icon-phone"/>
            </div>
            <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
              <a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a>
            </div>
          </el-form-item>
  
          <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <div>
              <el-input type="password" placeholder="设置密码" v-model="params.password"/>
              <i class="iconfont icon-password"/>
            </div>
          </el-form-item>
  
          <div class="btn">
            <input type="button" class="sign-up-button" value="注册" @click="submitRegister()">
          </div>
          <p class="sign-up-msg">
            点击 “注册” 即表示您同意并愿意遵守简书
            <br>
            <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
            和
            <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
          </p>
        </el-form>
        <!-- 更多注册方式 -->
        <div class="more-sign">
          <h6>社交帐号直接注册</h6>
          <ul>
            <li><a id="weixin" class="weixin" target="_blank" href="http://huaan.free.idcfengye.com/api/ucenter/wx/login"><i
              class="iconfont icon-weixin"/></a></li>
            <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import '~/assets/css/sign.css'
    import '~/assets/css/iconfont.css'
  
    import registerApi from '@/api/register'
  
    export default {
      layout: 'sign',
      data() {
        return {
          params: { //封装注册输入数据
            mobile: '',
            code: '',  //验证码
            nickname: '',
            password: ''
          },
          sending: true,      //是否发送验证码
          second: 60,        //倒计时间
          codeTest: '获取验证码'
        }
      },
      methods: {
       
         //注册提交的方法
         submitRegister() {
          registerApi.registerMember(this.params)
            .then(response => {
              //提示注册成功
                this.$message({
                  type: 'success',
                  message: "注册成功"
                })
              //跳转登录页面
              this.$router.push({path:'/login'})
                
            })
         },
         //倒计时
         timeDown() {
          let result = setInterval(() => {
            --this.second;
            this.codeTest = this.second
            if (this.second < 1) {
              clearInterval(result);
              this.sending = true;
              //this.disabled = false;
              this.second = 60;
              this.codeTest = "获取验证码"
            }
          }, 1000);
  
        },
         //通过输入手机号发送验证码
       /**  getCodeFun() {
           registerApi.sendCode(this.params.mobile)
            .then(response => {
                this.sending = false
                //调用倒计时的方法
                this.timeDown()
            })
         },**/
         getCodeFun() {
          this.sending = false
                //调用倒计时的方法
                this.timeDown()
         },
  
        checkPhone (rule, value, callback) {
          //debugger
          if (!(/^1[34578]\d{9}$/.test(value))) {
            return callback(new Error('手机号码格式不正确'))
          }
          return callback()
        }
      }
    }
  </script>

default.vue

<template>
  <div class="in-wrap">
    <!-- 公共头引入 -->
    <header id="header">
      <section class="container">
        <h1 id="logo">
          <a href="#" title="谷粒学院">
            <img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
          </a>
        </h1>
        <div class="h-r-nsl">
          <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>课程</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>名师</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>文章</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>问答</a>
            </router-link>
          </ul>
          <!-- / nav -->
           <!-- / nav -->
<ul class="h-r-login">
    <li v-if="!loginInfo.id" id="no-login">
        <a href="/login" title="登录">
            <em class="icon18 login-icon">&nbsp;</em>
            <span class="vam ml5">登录</span>
        </a>
        |
        <a href="/register" title="注册">
            <span class="vam ml5">注册</span>
        </a>
    </li>
    <li v-if="loginInfo.id" id="is-login-one" class="mr10">
        <a id="headerMsgCountId" href="#" title="消息">
            <em class="icon18 news-icon">&nbsp;</em>
        </a>
        <q class="red-point" style="display: none">&nbsp;</q>
    </li>
    <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
        <a href="/ucenter" title>
            <img
                 :src="loginInfo.avatar"
                 width="30"
                 height="30"
                 class="vam picImg"
                 alt
                 >
            <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
        </a>
        <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
    </li>
    <!-- /未登录显示第1 li；登录后显示第2，3 li -->
</ul>
          <aside class="h-r-search">
            <form action="#" method="post">
              <label class="h-r-s-box">
                <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
                <button type="submit" class="s-btn">
                  <em class="icon18">&nbsp;</em>
                </button>
              </label>
            </form>
          </aside>
        </div>
        <aside class="mw-nav-btn">
          <div class="mw-nav-icon"></div>
        </aside>
        <div class="clear"></div>
      </section>
    </header>
    <!-- /公共头引入 -->
      
    <nuxt/>

    <!-- 公共底引入 -->
    <footer id="footer">
      <section class="container">
        <div class>
          <h4 class="hLh30">
            <span class="fsize18 f-fM c-999">友情链接</span>
          </h4>
          <ul class="of flink-list">
            <li>
              <a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a>
            </li>
          </ul>
          <div class="clear"></div>
        </div>
        <div class="b-foot">
          <section class="fl col-7">
            <section class="mr20">
              <section class="b-f-link">
                <a href="#" title="关于我们" target="_blank">关于我们</a>|
                <a href="#" title="联系我们" target="_blank">联系我们</a>|
                <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                <a href="#" title="资源下载" target="_blank">资源下载</a>|
                <span>服务热线：010-56253825(北京) 0755-85293825(深圳)</span>
                <span>Email：info@atguigu.com</span>
              </section>
              <section class="b-f-link mt10">
                <span>©2018课程版权均归谷粒学院所有 京ICP备17055252号</span>
              </section>
            </section>
          </section>
          <aside class="fl col-3 tac mt15">
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wx-icon.png" alt>
              </span>
            </section>
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wb-icon.png" alt>
              </span>
            </section>
          </aside>
          <div class="clear"></div>
        </div>
      </section>
    </footer>
    <!-- /公共底引入 -->
  </div>
</template>
<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";

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

export default {
  data() {
    return {
        token:'',
        loginInfo: {
          id: '',
          age: '',
          avatar: '',
          mobile: '',
          nickname: '',
          sex: ''
        }
    }
  },
  created() {
    //获取路径里面token值
    this.token = this.$route.query.token
    console.log(this.token)
    if(this.token) {//判断路径是否有token值
       this.wxLogin()
    }

    this.showInfo()
  },
  methods:{
    //微信登录显示的方法
    wxLogin() {
      //console.log('************'+this.token)
      //把token值放到cookie里面
      cookie.set('guli_token',this.token,{domain: 'localhost'})
      cookie.set('guli_ucenter','',{domain: 'localhost'})
     //console.log('====='+cookie.get('guli_token'))
      //调用接口，根据token值获取用户信息
      loginApi.getLoginUserInfo()
        .then(response => {
           //console.log('################'+response.data.data.userInfo)
           this.loginInfo = response.data.data.userInfo
           cookie.set('guli_ucenter',this.loginInfo,{domain: 'localhost'})
        })
    },
    //创建方法，从cookie获取用户信息
    showInfo() {
      //从cookie获取用户信息
      var userStr = cookie.get('guli_ucenter')
      // 把字符串转换json对象(js对象)
      if(userStr) {
        this.loginInfo = JSON.parse(userStr)
        console.log("--------"+this.loginInfo);
      }
    },

    //退出
    logout() {
      //清空cookie值
      cookie.set('guli_token','',{domain: 'localhost'})
      cookie.set('guli_ucenter','',{domain: 'localhost'})
      //回到首页面
      window.location.href = "/";
    }

  }
};
</script>

小玩偶啊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
单点登录--Token---整合JWT

1.含义：SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。SSO(single sign on)模式优点：用户身份信息独立管理，更好的分布式管理。可以自己扩展安全策略缺点：认证服务器访问压力较大。1.1 实现方式：session广播机制的实现使用cookie+redis实现使用token的实现1.2. session主要是 session复制，从一个服务复制到另一个服务中1.3. 使用cookie+redis实现1、在项目中任
复制链接

扫一扫