VUE 3 + CLI 4 + VUETIFY,QUASAR 개발 환경 구성

vue add vuex
vue add router //history mode 는 y로 해준다.

vue add vuetify // 옵션은 V3 로해준다 

router
	ㄴmodules
		ㄴlogin.router.js
	ㄴindex.js
views
	ㄴmain
		ㄴMain.vue
	ㄴlogin
		ㄴLogin.vue

store
	ㄴmodules
		ㄴlogin
			ㄴindex.js
			ㄴlogins.actions.js
			ㄴlogins.mutations.js
			ㄴlogins.getters.js
			ㄴlogins.state.js
		ㄴmain
			ㄴ.....

npm i axios

import jwtUtil from '@/shared/utils/token-util';//토큰이 을 로컬스토리지에 set해주거나 get하는 로직을 임포트

//라우터가 실행되기전에 실행한다 
router.beforeEach((to, from, next) => { 
  //로그인 안한경우에만오는 페이지 login.router 해당 
  const onlyWhenNotLoggedIn = to.matched.some( 
    (record) => record.meta.onlyWhenNotLoggedIn 
  ); 
  //로그인여부 
  const loggedIn = isValidAccessToken(); 
  //로그인 필요한 페이지 접근 시 
  if (to.matched.some((record) => !!record.meta.auth)) { 
    //토근존재여부 판단 
    if (!loggedIn) { 
      next({ 
        path: '/login', 
        params: { nextUrl: to.fullPath }, 
      }); 
    } else { 
      next(); 
    } 
  } 
  //로그인 필요없는페이지 접근 
  else if (to.matched.some((record) => !record.meta.auth)) { 
    //로그인 되어 있는데 다시 로긍니 페이지로 이동한다면 
    if (loggedIn && onlyWhenNotLoggedIn) { 
      next({ 
        name: 'main', 
      }); 
    } else { 
      next(); 
    } 
  } 
}); 
//토큰생성 여부 판단 
function isValidAccessToken() { 
  //로컬스토리지에 저장된 토큰가져온다. 
  const accessToken = localStorage.getItem('accessToken'); 
  if ( 
    !accessToken || 
    accessToken === 'null' || 
    accessToken === 'undefined' || 
    !jwtUtil.isValidJwt(accessToken) //유효성검사 
  ) { 
    return false; 
  } 
  return true; 
}

const tokenUtil = { 
  //로컬스토리지에 토큰 셋팅해준다 
  setItem: async function (key, val) { 
    return Promise.resolve().then(function () { 
      localStorage.setItem(key, val); 
    }); 
  }, 
  //로컬스토리지에 토큰 갸져온다 
  getItem: async function (key) { 
    return Promise.resolve().then(function () { 
      return localStorage.getItem(key); 
    }); 
  }, 
  //로컬스토리지에 토큰 제거 
  removeItem: async function (key) { 
    return Promise.resolve().then(function () { 
      localStorage.removeItem(key); 
    }); 
  }, 
  //토큰 유효성검사 
  isValidJwt(jwt) { 
    if (!jwt || jwt.split('.').length < 3) { 
      return false; 
    } 
    const data = JSON.parse(atob(jwt.split('.')[1])); 
    const exp = new Date(data.exp * 1000); 
    const now = new Date(); 
    return now < exp; 
  }, 
  invalidateJwt() { 
    this.removeItem('vuex'); 
    this.removeItem('accessToken'); 
    this.removeItem('username'); 
  }, 
  invalidateJwtAndReload() { 
    this.removeItem('vuex'); 
    this.removeItem('accessToken'); 
    this.removeItem('username'); 
    location.reload(); 
  }, 
}; 
export default tokenUtil;

<template> 
  <div> 
    Login Page 
    <ul class="lof"> 
      <li> 
        <input 
          class="ids" 
          v-model="loginForm.username" 
          ref="inputUsername" 
          placeholder="아이디 입력" 
          outlined 
        /> 
      </li> 
    </ul> 
    <div class="log_foot"> 
      <v-btn @click.prevent="handleSubmit"> Login </v-btn> //버튼클릭시 로그인 함수실행 
    </div> 
  </div> 
</template> 
<script> 
import { mapActions, mapState } from 'vuex'; 
export default { 
  name: 'Login', 
  data() { 
    return { 
      loginForm: { 
        username: null, 
        password: null, 
      }, 
    }; 
  }, 
  mounted() { 
    this.$refs.inputUsername.focus(); 
  }, 
  methods: { 
    ...mapActions('login', ['LOGIN_TEST']), 
    handleSubmit() {
//로그인 액션 실행 
      this.LOGIN_TEST(this.loginForm).then(() => { 
        if (localStorage.getItem('accessToken')) {
//accessToken 있을시에 main으로 라우팅해준다 
          this.$router.push({ name: 'main', params: {} }); 
        } else { 
//accessToken 없을시에 login으로 라우팅해준다          
          this.$router.push({ name: 'login', params: {} }); 
        } 
      }); 
    }, 
  }, 
}; 
</script> 
<style></style>

//로그인에서 사용할 service 추가 
import loginService from '@/services/login/login.service.js'; 
//로그인시 토큰 및 로컬스토리지 비워주기위해
import tokenUtil from '@/shared/utils/token-util'; 
export const LOGIN_TEST = ({ commit }, data) => { 
  //JWT and localstorege 비워준다 
  tokenUtil.invalidateJwt(); 
  //액션에서 api 요청예정 
  return loginService 
    .login(data.username) 
    .then((res) => { 
      const user = res.data; 
      console.log(user); 
      localStorage.setItem('username', user.username); 
      localStorage.setItem('accessToken', user.accessToken); 
      commit('SET_USER', user); 
    }) 
    .catch((err) => { 
      console.log(err); 
    }); 
};

import tokenUtill from '@/shared/utils/token-util'; 

//api 요청에 실행 로직 추가 
Api.interceptors.request.use(async function (config) { 
  //토큰가져옴 
  const acToken = tokenUtill.getItem('accessToken'); 
  if (acToken) { 
    config.headers['Authorization'] = `Bearer ${acToken}`; 
  } 
  return config; 
});
//api 응답에 실행 
Api.interceptors.response.use( 
  function (response) { 
    return response; 
  }, 
  function (error) { 
    const errorResponse = error?.response; 
    const errorStatus = errorResponse?.status; 
    
    if (!!errorStatus === 401 || errorStatus === 403) { 
      tokenUtill.invalidateJwtAndReload(); 
    } 
    return error; 
  } 
);
export default Api;

npm install --save vuex-persistedstate

import { createStore } from "vuex"; 
import createPersistedState from "vuex-persistedstate"; 
const store = createStore({ 
  // ... 
  plugins: [createPersistedState()], 
});

"rules": { 
      "no-console":"off", 
      "no-unused-vars": "off", 
      
      "prettier/prettier": [ 
        "error", 
        { 
        "semi": false, //세미콜론사용안함 
        "tabWidth": 2, //탭간격 
        "arrowParens": "avoid", //화살표함수사용시 단일값 () 안씀 
        "singleQuote": true, //""=>'' 로바꿈 
        "htmlWhitespaceSensitivity": "ignore", 
        "trailingComma": "none", //마지막 , 안씀 
        "endOfLine": "auto" 
        } 
      ] 
    }

<v-col class="mb-4"> 
        <v-btn 
          @click="logout" 
          class="font-weight-bold" 
          style="background-color: #42b983" 
        > 
          Log-out 
        </v-btn> 
      </v-col>//버튼추가해줬다
<script>
    //약식
export default {
methods: { 
    ...mapActions('login', ['LOGOUT']), 
    logout() { 
      console.log('로그아웃') 
      this.LOGOUT()//클릭시 로그아웃 액션호출 
    } 
  }
}  
</script>

export const LOGOUT = () => { 
  tokenUtil.invalidateJwtAndReload()//로컬스토리지 비워주고 화면 리로드한다. 
}

export default { 
  //methods 
  methods: { 
    //배열의 길이 
    isListLength(list) { 
      return list.length 
    } 
  } 
}

import globalMixin from '@/shared/mixins/global-mixin'
app.mixin(globalMixin)

<table class="mx-auto"> 
            <thead> 
              <tr> 
                <th>번호</th> 
                <th>제목</th> 
                <th>list length</th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr v-for="item in list" :key="item.id"> 
                <td>{{ item.id }}</td> 
                <td> 
                  <a @click="detail(item)"> 
                    {{ item.title }} 
                  </a> 
                </td> 
                <td>{{ isListLength(list) }}</td>//믹스인사용 
              </tr> 
            </tbody> 
          </table>

vue create vue3_project_quasar
//생성해주고 기존과같이 옵션적용

vue add quasar //quasar로 갈아타기