Vue实现登录案例

前端

request.js封装axios

import axios from 'axios'
import store from '@/store'

const ConfigBaseURL = 'http://localhost:8080'

//使用create方法创建axios实例
const request = axios.create({
    timeout: 5000,
    baseURL: ConfigBaseURL,
    // 设置Content-Type，规定了前后端的交互使用json
    // headers: { 'Content-Type': 'application/json;charset=utf-8' }
})

//这是在每次请求头header中放token
request.interceptors.request.use(config => {
    
    if(store.state.token){
        console.log(store.state.token)
        config.headers['token'] = localStorage.getItem("token") == null ? '' : localStorage.getItem("token")
    }
    return config
})

//这里可以拦截所有失败的请求，但是我全部放出去了
request.interceptors.response.use(response => {
    let res = response.data
    if(res.code == 20000){
        return res
    }else{
        return res;
    }
})
export default request

vuex存储token

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // user
  state:{
    token: ''
  },
  mutations:{
    setToken(state,token){
      state.token = token
      //把token存储在本地
      localStorage.setItem("token",token)
    }
  }
})

用户登录

api封装login.js

import resquest from "@/utils/request"

export default {
    login(username,password){
        return resquest({
            url: "/login?username=" + username + "&password=" + password,
            method: "post"
        })
    },
    main(){
        return resquest({
            url: "/main",
            method: "get"
        })
    }
}

后端接口我这里随便写的，自己后面可以自己实现一个json分装对象直接传给后端

login.vue

<template>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :xl="6" :lg="7">
      <div class="login-form">
        <h2>欢迎来到VueAdmin管理系统</h2>
        <p>公众号</p>
        <p>扫码二维码</p>
      </div>
    </el-col>
    <el-col :span="1">
      <el-divider direction="vertical"></el-divider>
    </el-col>
    <el-col :xl="6" :lg="7">
      <el-form
        label-position="right"
        :rules="rules"
        label-width="80px"
        :model="loginForm"
        ref="loginForm"
      >
        <el-form-item label="用户名" prop="username" style="width: 380px">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 380px">
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 380px">
          <el-input
            v-model="loginForm.code"
            style="width: 172px; float: left"
            maxlength="5"
          ></el-input>
          <el-image
            class="captchaImg"
            :src="captchaImg"
            @click="getCaptcha"
          ></el-image>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import login from "@/api/login";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
    };
  },
  computed: {},
  methods: {
    submitForm() {
      console.log("登录");
      login
        .login(this.loginForm.username, this.loginForm.username)
        .then((res) => {
          console.log(res);
          //存储token到vuex中
          this.$store.commit("setToken", res.data.token);
          this.$router.push("/main");
        });
    }
  },
};
</script>

<style scoped>
.el-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
.el-row {
  height: 100%;
  background-color: #fafafa;
}
.el-divider {
  height: 200px;
}
.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
</style>

后端

接口

@RestController
//@CrossOrigin
@Slf4j
public class LoginController {

    @PostMapping("/login")
    public R login(String username, String password){
        if(StringUtils.isEmpty(username) && StringUtils.isEmpty(password)){
            return R.error().message("登录用户或者密码不正确");
        }
        String jwtToken = JwtUtils.getJwtToken("1", username);
        log.info("#################token:" + jwtToken);
        return R.ok().data("token", jwtToken);
    }

    @GetMapping("/main")
    public R main(HttpServletRequest request){
        String token = request.getHeader("token");
        if(!StringUtils.isEmpty(token)){
            return R.ok().message("main成功");
        }else
            return R.error().message("main失败");
        }
}

工具类 jwt

package com.shengun.rabc.utill;

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;

public class JwtUtils {

    //token过期时间
    public static final long EXPIRE = 1000 * 60 * 60 * 24;

    //秘钥，每个公司生成规则不一样
    public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";

    //生成token字符串方法
    public static String getJwtToken(String id, String nickname) {
        String JwtToken = Jwts.builder()
                //设置jwt头信息，红色部分，内容固定，不需要改
                .setHeaderParam("typ", "JWT")
                .setHeaderParam("alg", "HS256")

                .setSubject("guli-user")
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))//设置过期时间

                //设置token主体部分，存储用户信息，可设置多个值
                .claim("id", id)
                .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 {
            //根据设置的防伪码解析token
            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;
            //根据设置的防伪码解析token
            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 "";
        //根据设置的防伪码解析token，获取对象
        Jws<Claims> claimsJws =
                Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        //获取token有效载荷【用户信息】
        Claims claims = claimsJws.getBody();
        return (String) claims.get("id");
    }

    public static String getJwtTokenToId(String jwtToken) {
        if (StringUtils.isEmpty(jwtToken)) return "";
        //根据设置的防伪码解析token，获取对象
        Jws<Claims> claimsJws =
                Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
        //获取token有效载荷【用户信息】
        Claims claims = claimsJws.getBody();
        return (String) claims.get("id");
    }
}