vue axios springboot2.0 cookie  token jwt 跨域 cors cookie存token  header 頭請求帶token 登陸login 採坑記錄 

首先

後端

pom檔案

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

配置類(springboot2.0的環境下直接把這個類粘到專案裡面就可以了)

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//配置類(springboot2.0的環境下直接把這個類粘到專案裡面就可以了)
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //設定允許跨域的路徑
        registry.addMapping("/**")
                //設定允許跨域請求的域名
                .allowedOrigins("*")
                //是否允許證書 不再預設開啟
                .allowCredentials(true)
                //設定允許的方法
                .allowedMethods("*")
                //跨域允許時間
                .maxAge(3600);
    }
}
 

jwt Token工具類：

import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

import java.util.Objects;

public class TokenUtils {
    //    public static final Key key = MacProvider.generateKey();
    //這裡直接使用的寫死的1234 為 key 這樣可以保證每次請求生成的token一致，方便測試
    public static final String key = "1234";

    /**
     * 傳入使用者名稱獲取token
     *
     * @param username
     * @return
     */
    public static String getToken(String username) {
        return Jwts.builder()//返回的字串便是我們的jwt串了
                .setSubject(username)//設定主題
                .signWith(SignatureAlgorithm.HS256, key)//設定演算法（必須）
                .compact();//這個是全部設定完成後拼成jwt串的方法
    }

    /**
     * 傳入token獲取使用者名稱
     *
     * @param token
     * @return
     */
    public static String getUsername(String token) {
        if (isCorrect(token)) {
            return Jwts.parser().setSigningKey(key).parseClaimsJws(token).getBody().getSubject();
        }
        return "";
    }

    //判斷是否有效token
    public static boolean isCorrect(String token) {
        return Objects.nonNull(token);
    }
}
 

cookie工具類

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CookieUtils {
    //根據cookie名獲取cookie值
    public static String getCookie(HttpServletRequest request, String cookieName) {
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (cookie.getName().equals(cookieName)) {
                    return cookie.getValue();
                }
            }
        }
        return null;
    }

    //給請求的返回內容中寫入cookie
    public static void writeCookie(HttpServletResponse response, String cookieName, String value) {
        Cookie cookie = new Cookie(cookieName, value);
        cookie.setPath("/");
        cookie.setMaxAge(3000 * 60);
        response.addCookie(cookie);
    }

}

User類：

import java.security.Principal;

public class User implements Principal {

    private String name;

    /**
     * Returns the name of this principal.
     *
     * @return the name of this principal.
     */
    @Override public String getName() {
        return this.name;
    }
}

登陸controller：

@Controller
@RequestMapping("login")
public class LoginController {
    @PostMapping("")
    @ResponseBody
    public String Login(@RequestBody User user, HttpServletResponse response, HttpServletRequest request,
                                @CookieValue(value = "token", required = false) String token) {
        //可以從cookie和頭請求兩個地方獲取cookie，一般為了防止跨域攻擊，需要驗證頭請求和cookie中的token是否一致，
        //cookie的token跨域攻擊可以模擬，但頭請求中的跨域攻擊無法模擬
        String headerToken = request.getHeader("token");
        System.out.println("headerToken:" + headerToken);
        System.out.println("cookieToken:" + token);
        if (token == null) {
            CookieUtils.writeCookie(response, "token", TokenUtils.getToken(user.getName()));
        } else {
            String username = TokenUtils.getUsername(token);
            if (user.getName().equals(username)) {
                return "驗證成功!"+username;
            }
        }
        //返回前臺
        return "第一次登陸或者登入失敗";
    }
}

前端：

js-cookie是個操作cookie的工具，可以百度下

這裡有個坑，就是你瀏覽器位址列訪問前端專案用的是ip就訪問後臺的baseURL就要使用ip，

如果你位址列用的localhost相同baseUrl也要是localhost

axios配置

import Axios from 'axios'
import Cookies from 'js-cookie'

//方便測試，每次重新整理頁面都清空cookie中的token
Cookies.remove('token');

const axios = Axios.create({
  // baseURL: 'http://localhost:8066',
  baseURL: 'http://192.168.1.107:8066',
  withCredentials:true,
  timeout: 5000,
});

axios.interceptors.request.use(
  config => {
    // 這裡寫死一個token，你需要在這裡取到你設定好的token的值
    const token = Cookies.get('token');
    console.log(Cookies.get('token'))
    console.log(Cookies.get())
    console.log(token)
    if (token) {
      // 這裡將token設定到headers中，header的key是token，這個key值根據你的需要進行修改即可
      config.headers.token = token;
    }
    return config
  },
  error => {
    return Promise.reject(error)
  });

export default axios

登入頁面：

<template>
    <div>
        <el-form label-position="top">
            <el-form-item label="使用者名稱">
                <el-input v-model="username"></el-input>
            </el-form-item>
            <el-form-item label="密碼">
                <el-input v-model="password"></el-input>
            </el-form-item>
            <el-button type="primary" @click="login">登入</el-button>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        this.$axios.post('login', {
          name: this.username
        })
          .then(() => {
            console.log('成功')
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
  }
</script>