vue请求头header带token过程，为单点登录sso铺垫

今天准备做sso的时候，突然发现vue请求头还是要记录一下的，虽然不是专业前端。

后端生成token

导入依赖：

<!--jwt--><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency>

自己写了一个Jwt的小工具类:

package com.xii.springboot_mybatis.utils;


import io.jsonwebtoken.*;

import java.util.Date;
import java.util.UUID;publicclassJwtUtil{//生成publicstatic StringgetToken(Integer userId,String username){
        JwtBuilder builder= Jwts.builder();
        String token= builder//header 头部.setHeaderParam("type","JWT").setHeaderParam("alg","HS256")//payloa载体    有效载荷.claim("user_id", userId).claim("username", username)//主题.setSubject("admin-test").setExpiration(newDate(System.currentTimeMillis()+(60*1000))).setId(UUID.randomUUID().toString())//签名.signWith(SignatureAlgorithm.HS256,"wxhtt").compact();//生成return token;}/**
     * 解析
     */publicstatic BooleanparseToken(String token){try{
            JwtParser parser= Jwts.parser();
            Jwt<Header, Claims> result= parser.setSigningKey("wxh").parseClaimsJwt(token);
            Claims claims= result.getBody();
            System.out.println("ID:"+ claims.get("userId"));
            System.out.println("角色:"+ claims.get("username"));
            System.out.println("Id:"+ claims.getId());
            System.out.println("签名"+ claims.getSubject());
            System.out.println("有效期"+ claims.getExpiration());returntrue;}catch(Exception e){
            e.printStackTrace();}returnfalse;}}

控制层：

 @PostMapping("selectPassWordUserName")public ResultselectPassWordUserName(@RequestBody Map<String,String> userpass){
        Map<String,Object> stringStringMap= sysUserService.selectPassWordUserName(userpass.get("username"), userpass.get("password"));
        System.out.println(stringStringMap);
        Integer userId=(Integer) stringStringMap.get("userId");
        String token= JwtUtil.getToken(userId,(String) stringStringMap.get("username"));
        System.out.println(token);if(stringStringMap.size()>0){returnnewResult(2000,"登录成功！",token);}else{returnnewResult(2000,"登录失败！",null);}}

Vue前端的登录请求

this.$refs[formName].validate((valid)=>{if(valid){// alert('submit!');
            var _this=this;this.$http.post('/sysUser/selectPassWordUserName',{
                username:this.ruleForm.pass,
                password:this.ruleForm.checkPass}).then(response=>{// console.log(response.data.data)//本地存储  没有过期时间// localStorage.setItem("token",JSON.stringify(response.data.data))
                cookie.set("token",response.data.data)//未设置cookies的过期时间   默认单位是天// let timer = setInterval(() => {//     //需要定时执行的代码//     console.log(cookie.get("token"))// },1000)})}else{
            console.log('error submit!!');returnfalse;}});

下面的并不完善 但是可以了解下原理：

token可以存在localStorage（本地存储中），也可以存在cookies中，在header中设置token为了在每一个发送到后端的请求都可以从header中获取token值来验证。

下面的router.beforeEach是每一个页面的请求都会判断是否有token没有的话禁止访问。

在mian.js中

// 添加请求拦截器，在请求头中加token   //为请求头对象，添加Token 验证的Authorization 字段
axios.interceptors.request.use(
  config=>{// console.log(localStorage.getItem("token"))if(localStorage.getItem("token")){
      config.headers.Authorization="JWT "+ localStorage.getItem("token");}return config;},
  error=>{return Promise.reject(error);});// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next)=>{if(to.path==='/Login'){next();}else{// let token = localStorage.getItem('token');
    let token= cookies.get('token');
    console.log('请求：'+token=='undefined')if(token=== null|| token===''|| token=== undefined){//如果没有登录，跳转到登录页面next('/Login');}else{if(to.matched.length===0){//没有匹配到当前路由  则 404next('/404')}else{next();}}}});