未登录用户访问私有路由时展示Sonner Toast提示的技术问询

以下是针对需求的优化实现，确保未登录用户通过修改URL访问受限页面时，能正确触发toast提示并跳转至登录页：

优化后的代码 #

import { useEffect, useMemo } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import Cookies from 'universal-cookie'
import { toast } from 'sonner'

const PrivateRoute = () => {
  // 用useMemo缓存Cookies实例，避免重复创建
  const cookie = useMemo(() => new Cookies(null, { path: '/' }), [])
  const navigate = useNavigate()

  useEffect(() => {
    const checkAuth = () => {
      const token = cookie.get('token')
      if (!token) {
        toast.error('您无权访问此页面，请先登录')
        navigate('/login', { replace: true })
      }
    }

    checkAuth()
  }, [cookie, navigate]) // 添加cookie到依赖，确保token变化时重新校验

  return <Outlet />
}

export default PrivateRoute

关键优化点 #

• 缓存Cookies实例：通过useMemo缓存Cookies对象，避免组件每次渲染都新建实例，提升性能。
• 完善依赖数组：将cookie加入useEffect依赖列表，保证token状态变化时能重新执行权限检查逻辑。
• 提示文本适配：将提示内容改为中文（若需英文可改回原文本You are not authorized to access this page）。

额外注意事项 #

• 确保已在应用根组件中正确挂载sonner的<Toaster />组件，否则toast无法正常显示。
• 登录成功后需正确设置token cookie，保证权限校验逻辑能识别登录状态。

内容的提问来源于stack exchange，提问作者Jack Phat