vue2_frontend...
This commit is contained in:
parent
5b8d70b817
commit
3978156981
@ -1,62 +0,0 @@
|
||||
import authApi from './auth.api'
|
||||
import tokenService from '../service/token.service'
|
||||
//참조: https://www.bezkoder.com/vue-refresh-token/
|
||||
const setup = (store) => {
|
||||
//Request 처리용
|
||||
authApi.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = tokenService.getLocalAccessToken()
|
||||
if (token) {
|
||||
// config.headers["Authorization"] = 'Bearer ' + token; // for Spring Boot back-end
|
||||
config.headers['x-access-token'] = token // for Node.js Express back-end
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
// Do something with request error
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
//Response 처리용
|
||||
authApi.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
async (err) => {
|
||||
//err.config->이전에 보냈던 api (url등)정보 전달용
|
||||
//err.response->오류 상태를 알기 위해
|
||||
//originalConfig._retry는 처음 시도용인지 알기 위해
|
||||
const originalConfig = err.config
|
||||
if (originalConfig.url !== '/auth/login' && err.response) {
|
||||
if (err.response.status === 401 && !originalConfig._retry) {
|
||||
return await reloadAccessToken(originalConfig)
|
||||
}
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
//AccessToken이 만료된경우 다시 받기위한 함수
|
||||
const reloadAccessToken = async (originalConfig) => {
|
||||
// Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
|
||||
originalConfig._retry = true
|
||||
try {
|
||||
//Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
|
||||
await authApi
|
||||
.post('/auth/reload', {
|
||||
refresh_token: tokenService.getLocalRefreshToken()
|
||||
})
|
||||
.then((rs) => {
|
||||
const { access_token } = rs.data
|
||||
store.dispatch('reload', access_token)
|
||||
tokenService.updateLocalAccessToken(access_token)
|
||||
})
|
||||
//reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
|
||||
return await authApi(originalConfig)
|
||||
} catch (_error) {
|
||||
return Promise.reject(_error)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default setup
|
||||
@ -1,5 +1,68 @@
|
||||
import axios from 'axios'
|
||||
const authApi = axios.create({
|
||||
import tokenService from '../service/token.service'
|
||||
const instance = axios.create({
|
||||
baseURL: process.env.VUE_APP_AUTH_HOST
|
||||
})
|
||||
export default authApi
|
||||
|
||||
//API Request 전 처리용
|
||||
instance.defaults.headers.post['Content-Type'] =
|
||||
'application/x-www-form-urlencoded'
|
||||
instance.defaults.headers.get['Accepts'] = 'application/json'
|
||||
instance.defaults.timeout = 2500
|
||||
|
||||
//Request 처리용
|
||||
instance.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = tokenService.getLocalAccessToken()
|
||||
if (token) {
|
||||
config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
|
||||
config.headers['x-access-token'] = token // for Node.js Express back-end
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
// Do something with request error
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
//Response 처리용
|
||||
instance.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
async (err) => {
|
||||
//err.config->이전에 보냈던 api (url등)정보 전달용
|
||||
//err.response->오류 상태를 알기 위해
|
||||
//originalConfig._retry는 처음 시도용인지 알기 위해
|
||||
const originalConfig = err.config
|
||||
if (originalConfig.url !== '/auth/login' && err.response) {
|
||||
if (err.response.status === 401 && !originalConfig._retry) {
|
||||
return await reloadAccessToken(originalConfig)
|
||||
}
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
//AccessToken이 만료된경우 다시 받기위한 함수
|
||||
const reloadAccessToken = async (originalConfig) => {
|
||||
// Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
|
||||
originalConfig._retry = true
|
||||
try {
|
||||
//Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
|
||||
await instance
|
||||
.post('/auth/reload', {
|
||||
refresh_token: tokenService.getLocalRefreshToken()
|
||||
})
|
||||
.then((rs) => {
|
||||
const { access_token } = rs.data
|
||||
tokenService.updateLocalAccessToken(access_token)
|
||||
})
|
||||
//reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
|
||||
return await instance(originalConfig)
|
||||
} catch (_error) {
|
||||
return Promise.reject(_error)
|
||||
}
|
||||
}
|
||||
export default instance
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
import axios from 'axios'
|
||||
import authApi from './auth.api'
|
||||
import tokenService from '../service/token.service'
|
||||
//참조: https://www.bezkoder.com/vue-refresh-token/
|
||||
|
||||
const interceptor = () => {
|
||||
//API Request 전 처리용
|
||||
axios.defaults.headers.post['Content-Type'] =
|
||||
'application/x-www-form-urlencoded'
|
||||
axios.defaults.headers.get['Accepts'] = 'application/json'
|
||||
axios.defaults.timeout = 2500
|
||||
|
||||
//Request 처리용
|
||||
axios.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = tokenService.getLocalAccessToken()
|
||||
if (token) {
|
||||
config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
|
||||
config.headers['x-access-token'] = token // for Node.js Express back-end
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
// Do something with request error
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
//Response 처리용
|
||||
axios.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
async (err) => {
|
||||
//err.config->이전에 보냈던 api (url등)정보 전달용
|
||||
//err.response->오류 상태를 알기 위해
|
||||
//originalConfig._retry는 처음 시도용인지 알기 위해
|
||||
const originalConfig = err.config
|
||||
if (originalConfig.url !== '/auth/login' && err.response) {
|
||||
if (err.response.status === 401 && !originalConfig._retry) {
|
||||
return await reloadAccessToken(originalConfig)
|
||||
}
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
//AccessToken이 만료된경우 다시 받기위한 함수
|
||||
const reloadAccessToken = async (originalConfig) => {
|
||||
// Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
|
||||
originalConfig._retry = true
|
||||
try {
|
||||
//Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
|
||||
await authApi
|
||||
.post('/auth/reload', {
|
||||
refresh_token: tokenService.getLocalRefreshToken()
|
||||
})
|
||||
.then((rs) => {
|
||||
const { access_token } = rs.data
|
||||
tokenService.updateLocalAccessToken(access_token)
|
||||
})
|
||||
//reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
|
||||
return await axios(originalConfig)
|
||||
} catch (_error) {
|
||||
return Promise.reject(_error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default interceptor
|
||||
@ -1,63 +0,0 @@
|
||||
import todoApi from './todo.api'
|
||||
import authApi from './auth.api'
|
||||
import tokenService from '../service/token.service'
|
||||
//참조: https://www.bezkoder.com/vue-refresh-token/
|
||||
const setup = (store) => {
|
||||
//Request 처리용
|
||||
todoApi.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = tokenService.getLocalAccessToken()
|
||||
if (token) {
|
||||
// config.headers["Authorization"] = 'Bearer ' + token; // for Spring Boot back-end
|
||||
config.headers['x-access-token'] = token // for Node.js Express back-end
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
// Do something with request error
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
//Response 처리용
|
||||
todoApi.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
async (err) => {
|
||||
//err.config->이전에 보냈던 api (url등)정보 전달용
|
||||
//err.response->오류 상태를 알기 위해
|
||||
//originalConfig._retry는 처음 시도용인지 알기 위해
|
||||
const originalConfig = err.config
|
||||
if (originalConfig.url !== '/auth/login' && err.response) {
|
||||
if (err.response.status === 401 && !originalConfig._retry) {
|
||||
return await reloadAccessToken(originalConfig)
|
||||
}
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
//AccessToken이 만료된경우 다시 받기위한 함수
|
||||
const reloadAccessToken = async (originalConfig) => {
|
||||
// Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
|
||||
originalConfig._retry = true
|
||||
try {
|
||||
//Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
|
||||
await authApi
|
||||
.post('/auth/reload', {
|
||||
refresh_token: tokenService.getLocalRefreshToken()
|
||||
})
|
||||
.then((rs) => {
|
||||
const { access_token } = rs.data
|
||||
store.dispatch('reload', access_token)
|
||||
tokenService.updateLocalAccessToken(access_token)
|
||||
})
|
||||
//reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
|
||||
return await authApi(originalConfig)
|
||||
} catch (_error) {
|
||||
return Promise.reject(_error)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default setup
|
||||
@ -27,10 +27,6 @@ localize('ko', ko)
|
||||
Vue.component('ValidationObserver', ValidationObserver)
|
||||
Vue.component('ValidationProvider', ValidationProvider)
|
||||
|
||||
//인터셉터 정의 및 Storage 연동
|
||||
import interceptor from './interceptors/iterceptor'
|
||||
interceptor()
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(BootstrapVue)
|
||||
new Vue({
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
class TokenService {
|
||||
getLocalAccessToken() {
|
||||
const user = JSON.parse(localStorage.getItem('user'))
|
||||
return user?.accessToken
|
||||
const user = this.getUser()
|
||||
return user?.access_token
|
||||
}
|
||||
updateLocalAccessToken(token) {
|
||||
let user = JSON.parse(localStorage.getItem('user'))
|
||||
user.accessToken = token
|
||||
let user = this.getUser()
|
||||
user.access_token = token
|
||||
localStorage.setItem('user', JSON.stringify(user))
|
||||
}
|
||||
getLocalRefreshToken() {
|
||||
const user = JSON.parse(localStorage.getItem('user'))
|
||||
return user?.refreshToken
|
||||
const user = this.getUser()
|
||||
return user?.refresh_token
|
||||
}
|
||||
getUser() {
|
||||
return JSON.parse(localStorage.getItem('user'))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user