如何在VUE中使用JWT令牌数据？

Question

有效载荷映像

预览图像 vue

我在Spring Boot，Vue 2 JWT Token Project。我成功地通过有效载荷发送信息，但我得到了令牌，但是我不知道如何从中获取数据。我想显示用户配置文件。如何使用令牌通过ID显示用户数据？这是参考代码 https://www.bezkoder.com/vue-refresh-token/ < /a>，这是我的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div class="login_wrap">        
        <div class="login_container">
            <div class="login_contents">
                <div class="login_banner">
                    <h1><a href="/"><img src="../assets/start-c.png"></a></h1>                    
                </div>                
                <h4>회원 서비스 이용을 위해 로그인 해주세요</h4>
                <form class="login_form" @submit.prevent="handleLogin">
                    <ul>
                        <li>
                            <input type="text" class="login_id" v-model="memberEntity.identity" placeholder="아이디 입력" width="100" v-validate="'required'" name="identity">
                        </li>
                        <li>
                            <input type="password" class="login_password" v-model="memberEntity.password" placeholder="비밀번호 입력" width="100" v-validate="'required'" name="password"/>
                        </li>
                    </ul>

                    

                    <div class="button_wrap">
                        <button type="submit">Login</button>
                    </div>                  
                </form>
                
            </div>
        </div>
    </div>
</template>

<script>
import MemberEntity from '../models/memberEntity';

export default {
    name:"Login",
    
    data(){
        return{
            memberEntity: new MemberEntity('',''),
            loading: false,
            message: ''
        }
    },

    computed: {
        loggedIn() {
            return this.$store.state.member.status.loggedIn;
        }
    },
    created() {
        if (this.loggedIn) {
            this.$router.push('/profile');
        }
    },
    methods: {
        handleLogin() {
           
            this.loading = true;
            this.$validator.validateAll().then(isValid => {
                if (!isValid) {
                    this.loading = false;
                    return;
                }
                if (this.memberEntity.identity && this.memberEntity.password) {
                this.$store.dispatch('member/login', this.memberEntity).then(
                    () => {
                        this.$router.push('/profile');                        
                    },
                    error => {
                    this.loading = false;
                    this.message =
                        (error.response && error.response.data) ||
                        error.message ||
                        error.toString();
                        
                    }
                );
            }
        });
        }
    }
  
};
</script>

<style lang="scss" scoped>
.login_wrap {
    .login_container{
        width:1020px;
        height: 100%;
        margin: 0 auto;

        .login_contents{
            padding: 92px 0 145px 0;

            .login_banner{
                margin: 11px auto 0;
                text-align: center;
                height: 40px;
                width: 120px;
                h1{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }

            }
            
            h4{
                color:#666666; 
                text-align: center;
                font-weight:400;
            }

            .login_form{
                width: 510px;
                margin: 0 auto;

                ul{
                    margin-top: 18px;
                    padding:0 20px;
                    
                    li{
                        margin-top: 18px;
                        list-style-type:none;
                        
                        input[type="password"] {
                            font: small-caption;
                        }

                        input{
                            padding: 0 20px;
                            width: 430px;
                            font-size:13px;
                            height: 60px;
                            line-height: 60px;
                            vertical-align: middle;
                            border-radius: 0 0 5px 5px;
                            border: 1px solid #dddddd; 
                            transition: 0.5s ease-in-out all;   
                            background:white;    

                            &:focus{                
                                outline:none;        
                                border: 1px solid transparent;
                                background-origin: border-box;   
                                display:inline-block;     
                                background: linear-gradient(#fff 0 0) padding-box,linear-gradient(to bottom,#5363ff, #8eeb97)border-box;
                            }
                        }
                        
                    }

                    li:first-child input{
                        border-bottom: 0;
                        border-radius: 5px 5px 0 0;
                    }

                    li:last-child {
                        margin-top: 0;

                    }
                    
                }

                

                .button_wrap{
                    
                    margin-top:32px;
                    display: flex;
                    overflow: hidden;
                    padding:0 20px;

                    button{     
                        cursor: pointer;     
                        width:100%;   
                        border:0;           
                        border-radius: 30px;
                        font-size: 20px;
                        line-height: 60px;
                        height: 60px;
                        background: linear-gradient(90deg, #5363ff, #8eeb97);
                        color: #ffffff;
                        display: inline-block;
                        flex: 1;
                        font-weight: bold;
                        text-align: center;
                    }
                }
              
            }
        }
    }
}

</style>

import api from "./api";
import TokenService from "./token.service";

class AuthService {   
    login({identity,password}){
      return api.post("/member/login",{
        identity,
        password
      })
      .then((response)=>{
        if(response.data.accessToken){
          TokenService.setMemberEntity(response.data);
        }
        return response.data;
      });
    }
    logout() {
      TokenService.removeMemberEntity();
    }
    signUp({identity,password,checkPassword,name,phone,birth,gender,memberRole}) {
      return api.post("/member/signUp", {
        identity, 
        password,  
        checkPassword,
        name,      
        phone,
        birth,
        gender,
        memberRole,            
      });
    }
  }
  export default new AuthService();

import axiosInstance from "./api";
import TokenService from "./token.service";
const setup = (store) => {
  axiosInstance.interceptors.request.use(
    (config) => {
      const token = TokenService.getMemberAccessToken();
      if (token) {
        config.headers["Authorization"] = 'Bearer ' + token;   
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
  axiosInstance.interceptors.response.use(
    (res) => {
      return res;
    },
    async (err) => {
      const originalConfig = err.config;
      if (originalConfig.url !== "/member/login" && err.response) {
        // Access Token was expired
        if (err.response.status === 401 && !originalConfig._retry) {
          originalConfig._retry = true;
          try {
            const rs = await axiosInstance.post("/member/refresh", {
              refreshToken: TokenService.getMemberRefreshToken(),
            });
            const { accessToken } = rs.data;
            store.dispatch('member/refreshToken', accessToken);
            TokenService.updateLocalAccessToken(accessToken);
            return axiosInstance(originalConfig);
          } catch (_error) {
            return Promise.reject(_error);
          }
        }
      }
      return Promise.reject(err);
    }
  );
};
export default setup;

class TokenService {
    getMemberRefreshToken() {
      const memberEntity = JSON.parse(localStorage.getItem("memberEntity"));
      return memberEntity?.refreshToken;
    }
    getMemberAccessToken() {
      const memberEntity = JSON.parse(localStorage.getItem("memberEntity"));
      return memberEntity?.accessToken;
    }
    updateMemberAccessToken(token) {
      let memberEntity = JSON.parse(localStorage.getItem("memberEntity"));
      memberEntity.accessToken = token;
      localStorage.setItem("memberEntity", JSON.stringify(memberEntity));
    }
    getMemberEntity() {
      return JSON.parse(localStorage.getItem("memberEntity"));
    }
    setMemberEntity(memberEntity) { 
      console.log(JSON.stringify(memberEntity));
      localStorage.setItem("memberEntity", JSON.stringify(memberEntity));
    }
    removeMemberEntity() {
      localStorage.removeItem("memberEntity");
    }
  }
  export default new TokenService();

import AuthService from '../services/auth.service';
const memberEntity = JSON.parse(localStorage.getItem('memberEntity'));

const initialState = memberEntity
  ? { status: { loggedIn: true }, memberEntity }
  : { status: { loggedIn: false }, memberEntity: null };

export const member = {
  namespaced: true,
  state: initialState,
  actions: {
    login({ commit }, memberEntity) {
      return AuthService.login(memberEntity).then(
        memberEntity => {
          commit('loginSuccess', memberEntity);
          return Promise.resolve(memberEntity);
        },
        error => {
          commit('loginFailure');
          return Promise.reject(error);
        }
      );
    },
    logout({ commit }) {
      AuthService.logout();
      commit('logout');
    },
    signUp({ commit }, memberEntity) {
      return AuthService.signUp(memberEntity).then(
        response => {
          commit('signUpSuccess');
          return Promise.resolve(response.data);
        },
        error => {
          commit('signUpFailure');
          return Promise.reject(error);
        }
      );
    },
    refreshToken({ commit }, accessToken) {
      commit('refreshToken', accessToken);
    }
  },
  mutations: {
    loginSuccess(state, memberEntity) {
      state.status.loggedIn = true;
      state.memberEntity = memberEntity;
    },
    loginFailure(state) {
      state.status.loggedIn = false;
      state.memberEntity = null;
    },
    logout(state) {
      state.status.loggedIn = false;
      state.memberEntity = null;
    },
    signUpSuccess(state) {
      state.status.loggedIn = false;
    },
    signUpFailure(state) {
      state.status.loggedIn = false;
    },
    refreshToken(state, accessToken) {
      state.status.loggedIn = true;
      state.memberEntity = { ...state.memberEntity, accessToken: accessToken };
    }
  }
};