그룹과제 api
1. 인증
- 로그인을 하고 나면
acessToken이 나오게 됩니다. 이acessToken는 24시간 유효합니다.
(회원가입만 해도acessToken은 나옵니다)
1-1 인증확인
acessToken을 로컬스토로지에 저장을 해놓았다가, 로컬스토로지에 저장된 이acessToken를 인증 확인하는 용도로 다시 서버에 요청할 수 있습니다.- 사용자가 로그인이 된 상황이 맞다면 로그인 한 사용자가 맞다는 응답이 다시 올 것입니다. 그 응답에는 사용자 정보가 들어있습니다.
⭐1-1 예제: 로그인을 한 상황과 아닌 상황을 구분하는 로직짜기
- 로그인에서 많이 사용하는 방법은 로컬스토로지입니다.
로컬스토로지에 임의로 currentUser값을 설정해줍니다. 로컬스토로지에의 정보는 json정보(문자데이터)이기 때문에 자바스크립트에서 사용하기 위해서 JSON.pars를 해줘야합니다.
1) currentUser 조회
guards.js
import router from './index.js'
router.beforeEach((to) => {
console.log(to.meta.auth)
console.log(JSON.parse(localStorage.getItem('currentUser')))
return true
})
이렇게 받아온 정보의 name이 있으면 유효한 사용자라는 것을 알 수 있습니다.
2) 조건설정
guards.js
- router의 beforeEach와
to.meta.auth를 이용해 로그인 검증 로직을 짤 수 있습니다. - 아래 예시의 경우 페이지에 접근 시
to.meta.auth가 true인지를 먼저 체크한 후 localStorage의 currentUser에 name 이 있는지를 확인하는 로직입니다. - 검증을 모두 통과한 경우에만
to.meta.auth설정이 된 페이지에 접근이 가능합니다. 그렇지 않은 경우 메인페이지로 이동하게 됩니다.
import router from './index.js'
router.beforeEach((to) => {
if(to.meta.auth) { //true인 경우
//currentUser에 name이 있으면 로그인 한 사람입니다,
//{}의 경우 null을 대비합니다.(json.parse떄문에 '{}'로합니다.)
const {name} = JSON.parse(localStorage.getItem('currentUser') || '{}')
if(name) {
// name이 있으면 통과~!
return true
} else {
//name이 없으면 메인페이지로 가라
//(login페이지로 보내야하는데 없으니 메인페이지 보통은 '/login'으로 보냅니다.)
return '/'
}
}
return true
})3) 토큰값이 유효한지 체크
- 로그인을 정상적으로 해 얻게 된 accessToken을 로컬스토로지에 저장을 해 두었다가 유효한지 확인을 할 수 있습니다.
- 토큰은 24시간이 지나면 만료되게 됩니다.
- 인증확인을 위한 api를 통해 토큰이 유효한지 체크를 합니다.
- headers에 'Authorization: Bearer 토큰값'정보를 포함해 전송해야합니다.(띄어쓰기 주의)
=> 문자 데이터 Bearer 띄어쓰기 한칸까지 잘 포함해서 전송합니다.
- headers에 'Authorization: Bearer 토큰값'정보를 포함해 전송해야합니다.(띄어쓰기 주의)
guards.js
import router from './index.js'
async function me(accessToken) {
const { data: user } = await axios({
url: 'https://asia-northeast3-heropy-api.cloudfunctions.net/api/auth/login',
method: 'POST',
headers: {
//default infos...
Authorization: 'Bearer ' + accessToken
}
})
return !!user.email
}
router.beforeEach((to) => {
if(to.meta.auth) {
const accessToken = JSON.parse(localStorage.getItem('accessToken') || '')
return me(accessToken)
? true
: '/login'
}
return true
})🐥사용가능한 API정리
1. 인증
1-1 회원가입
- 회원가입을 만들어서 세션을 받아 어떻게 관리를 하는지
1-2 로그인
- 회원가입을 한사람 입장에서는 로그인을 할 수 있습니다
1-3 인증확인
- 로그인을 한사람을 페이지가 넘어갔을 때 인증확인 할 수 있습니다(로그인이 유효한지 확인)
1-4 로그아웃
$fetch
const API_ENDPOINT = 'https://asia-northeast3-heropy-api.cloudfunctions.net/api'
const headers = {
"content-type": "application/json",
"apikey": "FcKdtJs202204",
"username": "<YOUR_NAME>"
}
export default {
install: app => {
app.config.globalProperties.$fetch = async(url, opts) => {
const mergeHeader = {
...headers,
...opts.headers
}
const {data} = await axios(API_ENDPOINT + url, {
...opts,
headers: mergeHeader
})
return data
}
}
}async logOut() {
try {
const res = await this.$fetch(`${_URL}/logout`, {
method: 'POST',
headers: {
Authorization: `Bearer ${this.token}`
}
})
console.log(res)
this.user = {}
} catch(error) {
console.log(error.response.data)
}
}회원가입의 경우 날것의 사용자가 들어오기 때문에 요청데이터 예시에서 볼 수 있듯이 accesToken과 같은 정보는 필요하지 않습니다
1-5 사용자정보수정
- 사용자 이름을 바꾸거나 비밀번호를 바꾸거나 프로필이미지를 수정하는 등 자신의 정보를 수정하는 경우 갱신 가능
- 내가 프로젝트를 만들 때 꼭 사용자가 정보를 수정해야할까?에 대해 의문을 가져보는 것이 좋다(즉, 회원정보를 수정할 수 있게 할거냐 아니냐가 선택사항)
사용자정보 업데이트
async updateUser() {
const token = this.token || sessionStorage.getItem('accessToken')
try {
this.user = await this.$fetch(`${_URL}/user`, {
method : 'PUT',
headers: {
Authorization: `Bearer ${token}`
},
data: {
oldPassword: this.oldPassword,
newPassword: this.newPassword,
displayName: this.displayName,
profileImgBase64: this.profileImgBase64
}
})
console.log(this.user)
} catch(error) {
console.log(error.response.data)
}
}프로필사진수정
selectFile(event) {
const {files} = event.target
for(const file of files) {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => {
this.profileImgBase64 = e.target.result
console.log(e.target.result)
}
}
}2 계좌
- 현재 과정에 핵심주제가 핀테크이기 때문에 계좌를 추가했습니다.
- 은행목록이 정해져있기에 은행코드에 맞게 설계를 해 사용하면 됩니다.
- 사용자의 정보입니다.
2-1 선택 가능한 은행 목록 조회
- degits: 은행 계좌 숫자 ex) 312-0147-0339-66 [3,4,4,2]
- disabled: 사용자가 선택된 은행정보는 다시 선택되지 않도록 disabled속성이 true로 변경됩니다.
2-2 계좌 목록 및 잔액 조회
- 계좌 잔액등을 확인할 때 사용합니다.
- totalBalance:총금액
- accounts에 계좌정보가 있습니다.
- 💡활용 예시
- 제품을 사용자가 구매할 때 은행계좌 돈을 통해 차감하게 됩니다.
(제품가격보다 balance가 적으면 살 수 없습니다.즉 3만원이 남아있는 신한은행을 선택해 결제를 하려고 한다면 어떠한 메세지를 보여주면 됩니다.)
- 제품을 사용자가 구매할 때 은행계좌 돈을 통해 차감하게 됩니다.
2-3 계좌 연결
- 사용자가 계좌를 선택해 등록할 때 사용할 수 있습니다.
- 사용자들은 계좌당 기본 300만원을 쓸 수 있습니다.
- 2-1의 선택가능한 은행목록 조회에서 하나씩 선택을 합니다. 하나를 선택하면 사용자에게 추가가 됩니다(그리고 disabled:true가 됩니다)
- 필수 값 중 서명은 true, false값으로 지정될 수 있게 되어 있습니다. 서명값에 true값이 들어와야 계좌가 정상적으로 연결된 것입니다.
- 예) 사인란은 만들어 사인이 입력된 정보가 있으면 true값 없으면 fasle값
2-4 계좌 해지
- 사용자가 더이상 사용하지 않을 계좌를 해지할 수 있습니다.
3. 제품
- 프로젝트를 만들 때 어떤 api를 쓸 수 있고 제품을 등록하고 사용자가 구매하지 못하고 제품을 내리고 하는 등의 관리자 페이지를 만들 수 있습니다.
- 사용자가 페이지와 서비스 관리자가 보는 페이지를 구분해서 만들 수도 있습니다.
3-1 모든 제품 조회
- 제품은 상세하게 볼 수 있는 페이지가 따로 있으며, 이는 모든 제품을 보는 API입니다. 따라서 제품 설명은 100자까지만 가능합니다.
- 100자 이상을 보려면 상세보기를 하면 됩니다.
- 제품의 사진도 여러개 올릴 수 있지만 대표사진은 1장만 나옵니다.
- 헤더정보에
msaterKey: true를 넣어줘야합니다.
3-2 soldout 처리 두가지
- 제품을 더 팔고싶지 않은 경우 2가지 방법이 있습니다.
- 관리자 페이지에서 지워버리는 것
- 매진 안내
isSoldOut:true
3-3 전체판매내역
- 판매제품에 대한 내역이 나옵니다.
- detailID는 거래아이디입니다.(거래된 아이디)
- reservation : 예약이 가능한 시스템
- done:false 거래중
3-4 판매내역관리
- 사용자와의 나와의 거래 정보: deatilId
- 기간이 지정된 것이 아니라 관리자가 처리여부를 처리할 수 있습니다.
3-5 제품추가
- 두개를 올릴수 있습니다(제품의 썸네일, 제품의 상세사진)
3-6 제품수정
- 사용자의 구매 내역 확인을 위해 제품을 실제로 삭제하지 않고 매진처리를 해야합니다.
- 매진은 다시 해제할 수 있습니다
3-7 단일 제품상세조회
3-8 제품검색
- tages에 제품정보를 넣어놓고 제품이름과 태그를 통해 제품을 검색할 수 있습니다. 제품은 ANd조건으로 결과를 반환합니다
- 빈값의 경우 모든 상품을 검색합니다.
주의: 제품구매신청
- 제품은 구매버튼만 누르는 것이 아니라 사용자가 확정버튼도 눌러줘야합니다.
- 시간은 국제표준시로 넣어야합니다.
서버세팅
1. Netilify
webpack의 경우
- static 폴더 내에
_redirects파일 생성
vite의 경우- publice 폴더 내에
_redirects파일 생성
_redirects
/* .index.html 2002. Vercel
루트 경로에 vercel.json파일 생성
{
"rewrites":[{ "source":"/:path*" , "destination": "/index.html" }]
}
0seo