Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
butter-studio
Commits
aa372d52
Commit
aa372d52
authored
Jul 21, 2021
by
한규민
Browse files
회원가입, 로그인
서버연동 완료
parent
598bf2fc
Changes
7
Show whitespace changes
Inline
Side-by-side
client/src/components/Login/Login.js
View file @
aa372d52
...
...
@@ -61,7 +61,7 @@ const Login = () => {
setError
(
""
);
setLoading
(
true
);
const
gusetData
=
guest
;
await
authApi
.
post
(
gusetData
);
await
authApi
.
login
(
gusetData
);
alert
(
'
로그인이 완료되었습니다.
'
)
setSuccess
(
true
);
}
catch
(
error
){
...
...
client/src/components/Signup/Signup.js
View file @
aa372d52
...
...
@@ -41,7 +41,8 @@ const Signup = () => {
//id(중복확인 체크, 형식 에러)
const
handleOnClickId
=
async
(
e
)
=>
{
e
.
preventDefault
();
// const existId = await authApi.compareId(user.userId)
try
{
setError
(
""
);
if
(
user
.
userId
.
length
<
5
)
{
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
...
...
@@ -51,21 +52,35 @@ const Signup = () => {
setOverlapId
(()
=>
(
false
));
};
}
else
{
const
userId
=
user
.
userId
;
await
authApi
.
compareId
(
userId
);
if
(
!
await
authApi
.
compareId
(
userId
)){
alert
(
"
이 아이디는 사용가능합니다.
"
)
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
[
e
.
target
.
name
]:
false
}));
setOverlapId
(()
=>
(
true
));
alert
(
"
이 아이디는 사용가능합니다.
"
)
setOverlapId
(()
=>
(
true
));
}
else
{
alert
(
"
이미 사용중인 아이디입니다.
"
)
setOverlapId
(()
=>
(
false
));
}
}
}
catch
(
error
){
catchErrors
(
error
,
setError
)
}
finally
{
setLoading
(
false
);
}
}
const
handleOnSummit
=
async
(
e
)
=>
{
e
.
preventDefault
();
try
{
setError
(
""
);
setError
(
()
=>
(
""
)
)
;
//처리가 될때까지 버튼(가입하기)이 안눌리게 지정
setLoading
(
true
);
setLoading
(
()
=>
(
true
)
)
;
//유효성 검사
validation
();
const
userData
=
user
;
...
...
@@ -91,14 +106,13 @@ const Signup = () => {
}
//유효성 검사
const
validation
=
()
=>
{
setPreId
(()
=>
(
user
.
userId
)
)
;
setPreId
(
user
.
userId
);
//아이디 유효성 검사
if
((
user
.
userId
.
length
<
5
))
{
setErrorMsg
(
errorMsg
=>
({
...
errorMsg
,
errorId
:
true
}));
}
else
if
((
user
.
userId
.
length
>=
5
)
&&
(
overlapId
===
true
)){
if
(
preId
!==
user
.
userId
){
console
.
log
(
preId
);
setOverlapId
(()
=>
(
false
));
setOverlapId
(
false
);
}
}
else
if
(
user
.
userId
>=
5
){
...
...
@@ -118,6 +132,8 @@ const Signup = () => {
// 최종 유효성 검사
if
(
overlapId
&&
(
Object
.
values
(
errorMsg
).
some
((
element
)
=>
(
element
))
===
false
))
{
}
else
if
(
!
overlapId
&&
(
Object
.
values
(
errorMsg
).
some
((
element
)
=>
(
element
))
===
false
)){
throw
new
Error
(
"
먼저 아이디 중복확인을 해주세요
"
)
}
else
{
throw
new
Error
(
"
유효하지 않은 데이터입니다.
"
);
}
...
...
@@ -131,7 +147,6 @@ const Signup = () => {
return
(
// 데이터 입력과 유효성 검사 후 보이는 경고창
<
form
className
=
{
`d-flex col-md-6 col-12 justify-content-center`
}
onSubmit
=
{
handleOnSummit
}
>
{
console
.
log
(
"
user==
"
,
user
,
errorMsg
,
overlapId
)}
<
div
className
=
"
d-flex flex-column
"
>
<
span
className
=
{
styles
.
title
}
>
회원가입
<
/span
>
<
div
className
=
"
d-flex flex-column
"
>
...
...
@@ -139,14 +154,13 @@ const Signup = () => {
<
label
className
=
{
styles
.
signupLabel
}
>
아이디
<
/label
>
<
div
className
=
"
d-flex col-md-auto
"
>
<
input
className
=
{
styles
.
input
}
type
=
"
text
"
name
=
"
userId
"
id
=
"
userId
"
placeholder
=
"
5~10자리 사이
"
onChange
=
{
handleUserOnChange
}
maxLength
=
"
10
"
required
/>
<
button
type
=
"
button
"
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickId
}
>
중복확인
<
/button
>
<
button
type
=
"
button
"
disabled
=
{
loading
}
name
=
"
errorId
"
className
=
{
`rounded-2 mt-2
${
styles
.
butterYellowAndBtn
}
${
styles
.
btnHover
}
`
}
onClick
=
{
handleOnClickId
}
>
중복확인
<
/button
>
<
/div
>
<
/div
>
{(
overlapId
===
false
)
&&
errorMsg
.
errorId
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
5
~
10
자리
사이로
입력해주세요
.
<
/p>
}
{
overlapId
&&
(
errorMsg
.
errorId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복이
확인되었습니다
.
<
/p>
}
{(
errorMsg
.
errorId
===
false
)
&&
(
overlapId
===
false
)
&&
<
p
className
=
{
styles
.
passwordConfirmError
}
>
아이디
중복확인을
해주세요
.
<
/p>
}
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
div
className
=
{
styles
.
inputContent
}
>
<
label
className
=
{
styles
.
signupLabel
}
>
별명
<
/label
>
...
...
server/controllers/user.controller.js
View file @
aa372d52
import
jwt
from
"
jsonwebtoken
"
;
import
config
from
"
../config/app.config.js
"
;
import
{
User
}
from
'
../db/index.js
'
import
{
User
,
Role
}
from
'
../db/index.js
'
const
login
=
async
(
req
,
res
)
=>
{
try
{
console
.
log
(
req
.
body
);
const
{
id
,
password
}
=
req
.
body
;
//사용자 존재 확인
const
user
=
await
User
.
scope
(
"
withPassword
"
).
findOne
({
where
:
{
userId
:
id
}
});
...
...
@@ -12,7 +11,7 @@ const login = async(req, res) => {
if
(
!
user
)
{
return
res
.
status
(
422
).
send
(
`사용자가 존재하지 않습니다`
);
}
// 2) 비밀번호 확인은 데이터베이스 프로토타입 메소드에서 처리
// 2) 비밀번호 확인은 데이터베이스 프로토타입 메소드에서 처리
(사용자가 입력한 비밀번호와 서버에 있는 비번 비교)
const
passwordMatch
=
await
user
.
comparePassword
(
password
);
if
(
passwordMatch
)
{
// 3) 비밀번호가 맞으면 토큰 생성
...
...
@@ -21,10 +20,10 @@ const login = async(req, res) => {
userId
:
user
.
id
,
// role: userRole.name,
};
const
token
=
jwt
.
sign
(
signData
,
config
.
jwtSecret
,
{
expiresIn
:
config
.
jwtExpires
,
});
console
.
log
(
"
token =
"
,
token
);
// 4) 토큰을 쿠키에 저장
res
.
cookie
(
config
.
cookieName
,
token
,
{
maxAge
:
config
.
cookieMaxAge
,
...
...
@@ -53,8 +52,8 @@ const login = async(req, res) => {
const
compareId
=
async
(
req
,
res
)
=>
{
const
id
=
req
.
params
.
userId
;
const
userid
=
await
User
.
find
All
({
where
:{
userId
:
id
}});
if
(
userid
){
const
userid
=
await
User
.
find
One
({
where
:{
userId
:
id
}});
if
(
userid
!==
null
){
return
res
.
json
(
true
);
}
else
{
return
res
.
json
(
false
);
...
...
@@ -65,21 +64,20 @@ const signup = async (req, res) => {
const
{
userId
,
userNickName
,
userBirthday
,
userPassword
}
=
req
.
body
;
// 휴대폰 중복 확인
const
userMbnum
=
String
(
req
.
body
.
userMbnum
);
console
.
log
(
userMbnum
);
console
.
log
(
typeof
userMbnum
);
try
{
const
mbnum
=
await
User
.
findOne
({
where
:
{
phoneNumber
:
userMbnum
}
});
if
(
mbnum
)
{
return
res
.
status
(
422
).
send
(
`이미 있는 휴대폰번호입니다.`
);
}
const
role
=
await
Role
.
findOne
({
where
:
{
name
:
"
user
"
}
})
const
newUser
=
await
User
.
create
({
userId
:
userId
,
nickname
:
userNickName
,
birth
:
userBirthday
,
phoneNumber
:
userMbnum
,
password
:
userPassword
password
:
userPassword
,
roleId
:
role
.
id
});
console
.
log
(
"
signup new user=
"
,
newUser
);
res
.
json
(
newUser
);
}
catch
(
error
)
{
console
.
error
(
error
.
message
);
...
...
server/db/index.js
View file @
aa372d52
import
{
Sequelize
}
from
"
sequelize
"
;
import
UserModel
from
"
../models/user.model.js
"
;
import
RoleModel
from
"
../models/role.model.js
"
;
import
MovieModel
from
"
../models/movie.model.js
"
;
import
dbConfig
from
"
../config/db.config.js
"
;
...
...
@@ -20,10 +21,15 @@ const sequelize = new Sequelize(
);
const
User
=
UserModel
(
sequelize
)
const
Role
=
RoleModel
(
sequelize
)
const
Movie
=
MovieModel
(
sequelize
)
User
.
belongsTo
(
Role
);
Role
.
hasOne
(
User
);
export
{
sequelize
,
User
,
Role
,
Movie
}
\ No newline at end of file
server/index.js
View file @
aa372d52
import
dotenv
from
"
dotenv
"
;
import
{
sequelize
}
from
"
./db/index.js
"
;
import
{
sequelize
,
Role
}
from
"
./db/index.js
"
;
import
app
from
"
./app.js
"
;
import
appConfig
from
"
./config/app.config.js
"
;
import
{
ROLE_NAME
}
from
'
./models/role.model.js
'
;
dotenv
.
config
({
path
:
`
${
process
.
env
.
NODE_ENV
===
"
production
"
?
"
.env
"
:
"
.env.development
"
...
...
@@ -11,11 +12,11 @@ dotenv.config({
sequelize
.
sync
({
force
:
false
})
.
then
(
async
()
=>
{
//
await Promise.all(
//
Object.keys(ROLE_NAME).map((name) => {
//
return Role.create({ name });
//
})
//
);
await
Promise
.
all
(
Object
.
keys
(
ROLE_NAME
).
map
((
name
)
=>
{
return
Role
.
create
({
name
});
})
);
// const adminRole = await Role.findOne({ where: { name: "admin" } });
...
...
server/models/role.model.js
View file @
aa372d52
...
...
@@ -2,12 +2,12 @@ import Sequelize from "sequelize";
const
{
DataTypes
}
=
Sequelize
;
//
export const ROLE_NAME = {
//
USER
=
"user",
//
MEMBER
=
"member",
//
ADMIN
=
"admin",
//
ROOT
=
"root",
//
}
export
const
ROLE_NAME
=
{
USER
:
"
user
"
,
MEMBER
:
"
member
"
,
ADMIN
:
"
admin
"
,
ROOT
:
"
root
"
,
}
const
RoleModel
=
(
sequelize
)
=>
{
const
Role
=
sequelize
.
define
(
...
...
server/models/user.model.js
View file @
aa372d52
...
...
@@ -28,10 +28,8 @@ const UserModel = (sequelize) => {
password
:
{
type
:
DataTypes
.
STRING
,
},
// role: {
// type: DataTypes.ENUM({
// values: Object.values(ROLE_NAME),
// }),
// roleId: {
// type: DataTypes.INTEGER
// }
},
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment