Dashboardでは、
<Box gridColumn={`span ${gridSize}`}>
を使っていました。
これは CSS Grid を利用したレイアウトです。
一方、
<Grid item xs={12}>
は Material UIのGridコンポーネントを利用したレイアウトです。
どちらも「横幅を何分使うか」を指定する考え方ですが、
という違いがあります。 どちらもよく使われますが、仕組みは異なります。
リフレッシュトークン（Refresh Token）
期限切れになったアクセストークンを再発行するための「更新用のトークン」です。
JWT認証では、この考え方がとても重要です。
例えば、ログインすると
ログイン
│
▼
アクセストークン発行
このアクセストークンには有効期限があります。
例えば
有効期限：30分
30分経つと
401 Unauthorized
になってしまいます。
もしリフレッシュトークンがなければ、
30分経過 ↓ 期限切れ ↓ もう一度ID・パスワード入力
になります。
ユーザーからするとかなり面倒です。
ログイン時に
ログイン ↓ Access Token（30分） Refresh Token（30日）
の2つが発行されます。
イメージは
ログイン
│
├── Access Token
│ ↑ API呼び出しに使う
│
└── Refresh Token
↑ 更新専用
30分後
Access Token ↓ 期限切れ
でも
Refresh Token ↓ 新しいAccess Token発行
できます。
つまり
Access Token①
│
▼
期限切れ
│
Refresh Token
│
▼
Access Token②
になります。
ユーザーは再ログイン不要です。
イメージ
ログイン
│
▼
┌──────────────────────┐
│ Access Token │
│ APIを呼ぶための鍵 │
│ 有効期限30分 │
└──────────────────────┘
┌──────────────────────┐
│ Refresh Token │
│ 鍵を作り直すための鍵 │
│ 有効期限30日 │
└──────────────────────┘
$service->handle($request)
↓
$request->condition() $request->sort() $request->direction() $request->limit()
↓
paginateByCondition(...)
↓
$condition->q()
で検索。
LaravelのDIとは、 「Controllerの引数に書くだけで、必要なクラスを自動生成して渡してくれる仕組み」
■ ■ Laravel内部で起きていること
リクエストが来ると👇
Laravelには「コンテナ」があるからです👇
Service Container（DIコンテナ）
!!project.isFavorite
を理解するには：
を順番に理解するとわかります。
■ まず truthy / falsy とは？
JavaScriptでは：
「true / false ではない値」も、条件式で true/false 扱いされる
という特徴があります。
■ truthy
条件式で：true扱いされる値
■ 例
'hello'
123
[]
{}
true
■ if に入れると
if ('hello') {
console.log('実行')
}
↓
実行される
■ falsy
条件式で：false扱いされる値
■ JavaScriptの falsy 一覧（超重要）
false 0 '' null undefined NaN
■ 例
if (0) {
console.log('実行')
}
↓
実行されない
否定（NOT）
■ 例
!true
↓
false
ここが本題。
Boolean化
!!value
=
!(!value)
■ 例
!!'hello'
■ 手順 ①
!'hello'
↓
false
②
!false
↓
true
■ 結果
!!'hello' === true
「確実に boolean にしたい」
■ よくある例
const isLoggedIn = !!user
■ user がnullなら
false
■ user object なら
true
const [favorite, setFavorite] = useState<boolean>(project.isFavorite)
簡単に言うと：
画面用の変数
let favorite = true
変更しても：
画面更新されない
const [favorite, setFavorite] = useState(true)
変更すると：
React再レンダリング
結論
useAuthは「認証ドメイン全部」を抱えすぎていて、本来は分割すべき状態
import { useEffect } from 'react'
import axios from 'axios'
import { useRouter } from 'next/router'
import { setCookie, destroyCookie, parseCookies } from 'nookies'
import useRequest, { fetcher } from './useRequest'
import type { AxiosError, AxiosResponse } from 'axios'
import { AUTH_TOKEN_KEY } from '@/constant'
import { APIRequest, HTTPMethod } from '@/lib/api/APIRequest'
import { User, UserAndToken, UserDetail, UserExperience, UserPreference } from '@/models'
interface Referral {
redirect?: string
}
export default function useAuth({ redirectTo = '', redirectIfFound = false } = {}) {
const {
data: user,
mutate,
error,
} = useRequest<User>({ url: '/v1/me' } as APIRequest, {
onError: (error: any) => {
if (error.response?.status != 401) return
handleAuthError()
},
})
const router = useRouter()
const loadingUser = user === undefined && !error
useEffect(() => {
if (loadingUser) return
if ((redirectTo && !redirectIfFound && !user) || (redirectIfFound && user)) {
router.push(redirectTo)
}
}, [user, redirectIfFound, redirectTo, loadingUser, router])
const mutateUserDetail = (detail: UserDetail): Promise<User> => mutate({ ...user, detail })
const mutateUserPreference = (preference: UserPreference): Promise<User> =>
mutate({ ...user, preference })
const mutateUserExperience = (experience: UserExperience): Promise<User> =>
mutate({ ...user, experience })
const setToken = (token: string) =>
setCookie(null, AUTH_TOKEN_KEY, token, {
maxAge: 30 * 24 * 60 * 60,
path: '/',
})
const login = async (email, password, rememberMe = false): Promise<User> => {
const response = await fetcher<UserAndToken>({
url: '/v1/login',
method: HTTPMethod.POST,
params: { email, password },
} as APIRequest)
setToken(response.token)
localStorage.setItem('rememberMe', rememberMe ? '1' : '0')
mutate(response.user, { rollbackOnError: true })
return response.user
}
const refresh = async (): Promise<void> => {
try {
const response = await fetcher<UserAndToken>({
url: `/v1/refresh`,
method: HTTPMethod.POST,
})
setToken(response.token)
const user: User = await fetcher<User>({
url: '/v1/me',
method: HTTPMethod.GET,
})
mutate(user, { rollbackOnError: true })
} catch (e) {
console.error(e)
logout(false)
}
}
const register = async (email, password, passwordConfirmation): Promise<User> => {
const registerVia = router.asPath
const response = await fetcher<UserAndToken>({
url: '/v1/register',
method: HTTPMethod.POST,
params: { email, password, passwordConfirmation, registerVia },
} as APIRequest)
setToken(response.token)
mutate(response.user, { rollbackOnError: true })
return response.user
}
const logout = async (needRequest = true) => {
if (location.href.includes('login')) return
if (location.href.includes('register')) return
if (location.href.includes('apply/step1')) return
if (location.href.includes('landing')) return
const cookies = parseCookies()
if (!cookies[AUTH_TOKEN_KEY]) return
needRequest &&
(await fetcher<User>({
url: '/v1/logout',
method: HTTPMethod.DELETE,
} as APIRequest))
destroyCookie(null, AUTH_TOKEN_KEY)
mutate(null)
localStorage.removeItem('rememberMe')
}
const leave = async () => {
await fetcher({
url: '/v1/user/leave',
method: HTTPMethod.DELETE,
} as APIRequest)
destroyCookie(null, AUTH_TOKEN_KEY)
mutate(null)
localStorage.removeItem('rememberMe')
}
const forgotPassword = async (email): Promise<void> => {
const response = await fetcher<User>({
url: '/v1/forgot-password',
method: HTTPMethod.POST,
params: { email },
} as APIRequest)
}
const resetPassword = async (email, password, passwordConfirmation): Promise<void> => {
const token = router.query.token
const response = await fetcher<UserAndToken>({
url: `/v1/reset-password/${token}`,
method: HTTPMethod.POST,
params: { token, email, password, passwordConfirmation },
} as APIRequest)
}
const setReferral = async (referral: string): Promise<string | null> => {
if (!!user) {
return null
}
const respnse = await fetcher<Referral>({
url: `/v1/set-referral/${referral}`,
method: HTTPMethod.POST,
} as APIRequest)
return respnse.redirect ?? '/'
}
const handleAuthError = async () => {
const rememberMe = JSON.parse(localStorage.getItem('rememberMe') ?? '0')
!!rememberMe && (await refresh())
!rememberMe && (await logout(false))
}
const onResponse = (response: AxiosResponse): AxiosResponse => response
const onResponseError = (error: AxiosError): Promise<AxiosError> | undefined => {
if (error.response?.status == 401 && error.config.method !== 'get') {
handleAuthError()
return
}
return Promise.reject(error)
}
axios.interceptors.response.use(onResponse, onResponseError)
return {
loadingUser,
user,
mutateUserDetail,
mutateUserPreference,
mutateUserExperience,
login,
register,
logout,
leave,
forgotPassword,
resetPassword,
setReferral,
}
}
