ساخت یک Wrapper احراز هویت در React/Next.js + GraphQL 💪

Summarize this content to 400 words in Persian Lang
مدیریت احراز هویت در یک برنامه React/Next.js با GraphQL گاهی اوقات می تواند مشکل باشد، به خصوص زمانی که نیاز به محافظت از مسیرها و مدیریت کارآمد جلسات کاربر دارید. در این مقاله، ما راه اندازی یک AuthWrapper مؤلفه ای برای کنترل یکپارچه احراز هویت در برنامه شما.

پیش نیازها

قبل از غواصی، اطمینان حاصل کنید که موارد زیر را دارید:

راه اندازی یک پروژه Next.js.
یک Backend یا API با پشتیبانی GraphQL برای احراز هویت.
درک اولیه از قلاب های React مانند useEffect و Apollo Client یا هر مشتری GraphQL دیگری.

هدف

ما می خواهیم یک قابل استفاده مجدد ایجاد کنیم AuthWrapper جزء که:

از مسیرها با هدایت مجدد کاربران احراز هویت نشده محافظت می کند.
پس از ورود به سیستم، داده های تأیید شده کاربر (به عنوان مثال، جزئیات مشتری) را واکشی می کند.
یک لودر را در طول فرآیند احراز هویت نشان می دهد.

راه اندازی AuthWrapper جزء

در اینجا پیاده سازی به روز شده است AuthWrapper جزء:

import { useEffect } from ‘react’
import { useRouter } from ‘next/router’
import { useQuery } from ‘@apollo/client’
import { useAuth } from ‘@/hooks/useAuth’
import Loader from ‘@/components/Loader’
import { GET_USER_ME_QY } from ‘@/lib/graphql’
import { UserDocument } from ‘@/types’

const authTokenName = ‘authToken’

interface Props {
children: React.ReactNode
}

const AuthWrapper = ({ children }: Props) => {
const router = useRouter()
const { setIsAuth, setUser, isAuthing, setIsAuthing } = useAuth()

// Redirect to login if no auth token exists
useEffect(() => {
if (typeof window === ‘undefined’) return
if (localStorage.getItem(authTokenName) === null) {
router.push(‘/login’)
}
}, [router])

// Query to fetch authenticated user data
const { refetch, loading } = useQuery<{
userMe: UserDocument
}>(GET_USER_ME_QY, {
skip:
typeof window === ‘undefined’ ||
localStorage.getItem(authTokenName) === null,
fetchPolicy: ‘network-only’,
onError: (error) => {
console.error(‘Error fetching user me’, error)
setIsAuth(false)
setIsAuthing(false)
},
onCompleted: (data) => {
setIsAuth(true)
setIsAuthing(false)
setUser(data.userMe)
},
})

// Trigger refetch if authentication token exists
useEffect(() => {
if (
typeof window !== ‘undefined’ &&
localStorage.getItem(authTokenName) !== null
) {
refetch()
}
}, [refetch])

return isAuthing ? <Loader /> : <>{children}>
}

export default AuthWrapper

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیحات کلیدی

1. بررسی احراز هویت

این برای محافظت از مسیرهای شما بسیار مهم است. اگر کاربر سعی کند بدون احراز هویت به یک صفحه محافظت شده دسترسی پیدا کند، به طور یکپارچه به صفحه ورود هدایت می شود و تجربه کاربری را بهبود می بخشد.

useEffect(() => {
if (localStorage.getItem(authTokenName) === null) {
router.push(‘/login’)
}
}, [router])

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. واکشی داده های تایید شده کاربر

قلاب useQuery داده های تأیید شده کاربر را با استفاده از GET_USER_ME_QY پرس و جو:

const { refetch, loading } = useQuery<{
userMe: UserDocument
}>(GET_USER_ME_QY, {
skip:
typeof window === ‘undefined’ ||
localStorage.getItem(authTokenName) === null,
fetchPolicy: ‘network-only’,
onError: (error) => {
console.error(‘Error fetching user me’, error)
setIsAuth(false)
setIsAuthing(false)
},
onCompleted: (data) => {
setIsAuth(true)
setIsAuthing(false)
setUser(data.userMe)
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا توجه داشته باشید که Apollo Client عملکردهای مفیدی مانند پاسخ به تماس را ارائه می دهد onError و onCompleted برای رسیدگی به خطاها و داده ها به ترتیب. اما شما می توانید از منطق مدیریت خطا و موفقیت خود استفاده کنید.

3. لودر برای فرآیند احراز هویت

Loader بازخورد بصری را به کاربران ارائه می دهد، که نشان می دهد وضعیت احراز هویت آنها در حال تأیید است، که برای یک تجربه کاربری روان ضروری است.

return isAuthing ? <Loader /> : <>{children}>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. مدیریت دولتی

ما از یک سفارشی استفاده می کنیم useAuth برای مدیریت وضعیت احراز هویت در سراسر برنامه قلاب کنید. در زیر اجرای useAuth قلاب:

import { useState, useContext, createContext } from ‘react’
import { UserDocument } from ‘@/types’

const AuthContext = createContext(null)

export const AuthProvider = ({ children }) => {
const [isAuthing, setIsAuthing] = useState(true)
const [isAuth, setIsAuth] = useState(false)
const [user, setUser] = useState<UserDocument | null>(null)

return (
<AuthContext.Provider
value={{
isAuthing,
setIsAuthing,
isAuth,
setIsAuth,
user,
setUser,
}}
>
{children}
AuthContext.Provider>
)
}

export const useAuth = () => useContext(AuthContext)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ادغام AuthWrapper در برنامه شما

برای استفاده از AuthWrapper، برنامه یا صفحات خاصی که نیاز به احراز هویت دارند را بپیچید:

import AuthWrapper from ‘../components/AuthWrapper’

const ProtectedPage = () => {
return (
<AuthWrapper>
<h1>You must be logged in to see me user!h1>
AuthWrapper>
)
}

export default ProtectedPage

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

ساختن یک پوشش احراز هویت در React/Next.js با GraphQL می‌تواند به ساده‌سازی فرآیند احراز هویت برنامه شما کمک کند. با دنبال کردن مراحل ذکر شده در این مقاله، می توانید یک جزء AuthWrapper قابل استفاده مجدد ایجاد کنید که احراز هویت را کنترل می کند، از مسیرها محافظت می کند و داده های کاربر را به طور موثر واکشی می کند.

تماس بگیرید

در صورت تمایل نظرات خود را با من در میان بگذارید یا برای توضیح بیشتر با من تماس بگیرید. کد نویسی مبارک! هک کن

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useQuery } from '@apollo/client'
import { useAuth } from '@/hooks/useAuth'
import Loader from '@/components/Loader'
import { GET_USER_ME_QY } from '@/lib/graphql'
import { UserDocument } from '@/types'

const authTokenName = 'authToken'

interface Props {
  children: React.ReactNode
}

const AuthWrapper = ({ children }: Props) => {
  const router = useRouter()
  const { setIsAuth, setUser, isAuthing, setIsAuthing } = useAuth()

  // Redirect to login if no auth token exists
  useEffect(() => {
    if (typeof window === 'undefined') return
    if (localStorage.getItem(authTokenName) === null) {
      router.push('/login')
    }
  }, [router])

  // Query to fetch authenticated user data
  const { refetch, loading } = useQuery<{
    userMe: UserDocument
  }>(GET_USER_ME_QY, {
    skip:
      typeof window === 'undefined' ||
      localStorage.getItem(authTokenName) === null,
    fetchPolicy: 'network-only',
    onError: (error) => {
      console.error('Error fetching user me', error)
      setIsAuth(false)
      setIsAuthing(false)
    },
    onCompleted: (data) => {
      setIsAuth(true)
      setIsAuthing(false)
      setUser(data.userMe)
    },
  })

  // Trigger refetch if authentication token exists
  useEffect(() => {
    if (
      typeof window !== 'undefined' &&
      localStorage.getItem(authTokenName) !== null
    ) {
      refetch()
    }
  }, [refetch])

  return isAuthing ? <Loader /> : <>{children}>
}

export default AuthWrapper

useEffect(() => {
  if (localStorage.getItem(authTokenName) === null) {
    router.push('/login')
  }
}, [router])

const { refetch, loading } = useQuery<{
  userMe: UserDocument
}>(GET_USER_ME_QY, {
  skip:
    typeof window === 'undefined' ||
    localStorage.getItem(authTokenName) === null,
  fetchPolicy: 'network-only',
  onError: (error) => {
    console.error('Error fetching user me', error)
    setIsAuth(false)
    setIsAuthing(false)
  },
  onCompleted: (data) => {
    setIsAuth(true)
    setIsAuthing(false)
    setUser(data.userMe)
  },
})

return isAuthing ? <Loader /> : <>{children}>

import { useState, useContext, createContext } from 'react'
import { UserDocument } from '@/types'

const AuthContext = createContext(null)

export const AuthProvider = ({ children }) => {
  const [isAuthing, setIsAuthing] = useState(true)
  const [isAuth, setIsAuth] = useState(false)
  const [user, setUser] = useState<UserDocument | null>(null)

  return (
    <AuthContext.Provider
      value={{
        isAuthing,
        setIsAuthing,
        isAuth,
        setIsAuth,
        user,
        setUser,
      }}
    >
      {children}
    AuthContext.Provider>
  )
}

export const useAuth = () => useContext(AuthContext)

import AuthWrapper from '../components/AuthWrapper'

const ProtectedPage = () => {
  return (
    <AuthWrapper>
      <h1>You must be logged in to see me user!h1>
    AuthWrapper>
  )
}

export default ProtectedPage