Nuxt.js, JWT 발급해서 access, refresh token -> cookie 쿠키 저장하기

Store Flow 공부

//$user.isLogin 이 역할이 뭔지?? 
//state 이 역할이 뭔지???

$user 풀어보면 아래와 같음
{ "email": "qkrdmstlf292@naver.com", "name": "네이버 박은실", "login_type": 0, "isLogin": true }

====>store->user안에 있는 state 를 뜻함


export const state = () => ({
    email: "",
    name: "",
    login_type: 0,
    isLogin: false
});









//commit & mutations
this.$store.commit("auth/SET_TOKEN", res.data.data.token); 



export const mutations = {
    INIT(state){
        state.token = "";
    },
    SET_TOKEN(state, value){
        state.token = value;
    }
}








//dispatch & actions
this.$store.dispatch("user/login", {
            email: data.email,
            name: res.data.data.name,
            login_type: type
          });  



export const actions = {
    login({commit}, payload){
        commit("SET_EMAIL", payload.email);
        commit("SET_NAME", payload.name);
        commit("SET_LOGIN_TYPE", payload.login_type);
        commit("SET_LOGIN", true);
    }
}

 

 

 

 

Login -> Auth.js -> Token.js -> TokenAxios.js -> Auth.js -> User.js

 

 

 

 

 

Token.js

 

 

 

 

TokenAxios.js

 

 

 

 

자동 로그아웃

token.js

/********************************
*
*   [token]
*   author: 김재훈
*   desc: 토큰 관리 모듈
*
********************************/

const jwt = require("jsonwebtoken");
const SECRET_KEY = "KOREA_TO_HOME_MVPICK";

/*
    [remainTomorrowSec]
    desc: 내일까지 남은 초를 계산
*/
function remainTomorrowSec(){
	const now = new Date();
	const tomorrow = new Date(now.getTime()+86400000);
    tomorrow.setHours(0, 0, 0, 0);
	return Math.floor((tomorrow.getTime() - now.getTime())/1000);
}

module.exports = {
    /*
        [create]
        desc: 원하는 데이터를 가진 토큰을 생성
    */
    create(data){
        return jwt.sign({
            data: !data ? {} : data,
        }, SECRET_KEY, {expiresIn: remainTomorrowSec()});
        // }, SECRET_KEY, {expiresIn: 60*1});
    },
    /*
        [update]
        desc: 기존의 토큰에 원하는 데이터를 업데이트
    */
    update(token, data){
        try{
            const result = jwt.verify(token, SECRET_KEY);
            return jwt.sign({
                data: {...result.data, ...data},
            }, SECRET_KEY, {expiresIn: remainTomorrowSec()});
            // }, SECRET_KEY, {expiresIn: 60*1});
        }
        catch(e){
            return jwt.sign({
                data: {},
            }, SECRET_KEY, {expiresIn: remainTomorrowSec()});
            // }, SECRET_KEY, {expiresIn: 60*1});
        }
    },

    // destroy(token, data){

    // }


    /*
        [middleware]
        desc: 유효한 토큰이 없으면 API 접근 방지 + vue store 바꾸기!!!
    */
    middleware(req, res, next){
        try{
            const result = jwt.verify(req.headers["access-token"], SECRET_KEY);
            req.token = {
                data: {
                    ...result.data
                }
            };
            next();
        }
        catch(e){
            res.status(401).send({status: "INVALID_TOKEN"});

        }
    }
}

 

tokenAxios.js ($nuxt.$store.commit("user/INIT"); // 여기 추가@@@)

import Vue from "vue";
import AxiosHelper from "../js/AxiosHelper.js";

export default ({app}, inject)=>{
    const axiosHelper = AxiosHelper.create();
    axiosHelper.setting.setBaseURL("/api");
    axiosHelper.setting.setConfig({
      headers: {
        "Access-Token": app.store.state.auth.token
      }
    });
    axiosHelper.setting.setEndFunction((success, fail, argument)=>{
      // 만약 엑시오스 에러 일 경우
      if(!!argument.isAxiosError){
        try{
            // 토큰이 만료된 에러 일 경우
            if(argument.response.data.status == "INVALID_TOKEN"){
              $nuxt.$store.dispatch("auth/logout");
            }

          // 토큰이 만료된 에러 일 경우
          // if(argument.response.data.status == "INVALID_TOKEN"){
          //   $nuxt.$router.push("/");
          //   $nuxt.$store.commit("user/INIT"); // 여기 추가@@@
            
          //   $nuxt.$emit('popup', {
          //     popState: true,
          //     title: "Please Login to use this service",
          //     okMethod: ()=>{
          //       console.log("hello!");
          //       $nuxt.$store.dispatch("auth/logout");
          //     },
          //     // content: `<div>로그인 토큰이 만료되었습니다.<br>다시 로그인 바랍니다.</div>`,
          //     poptype: 'alert', // alert , Confirm
          //     maxSize: 500,
          //   });
          // }
        }
        catch(e){}
        fail();
      }
      else{
        success();
      }
    });
    inject("tokenAxios", Vue.observable(axiosHelper));
}

 

 

 

https://fkkmemi.github.io/nemv/nemv-062-refresh-token/

모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)