使用 Supabase 保护 Next.js 路由
P粉111627787
P粉111627787 2024-04-06 11:13:00
[React讨论组]

我通过创建一个保护页面来实现路由保护,每当用户未登录时,我都会将其包装在要保护的页面中,但是如果用户登录了,他/她就会返回到登录页面,我想知道什么我的保护页面丢失了。以下是我在 Protect.js 中实现的内容:

import { useRouter } from 'next/router'
import React, { useEffect,useState } from 'react'
import {useUser} from "src/contexts/useUser"
import { supabase } from 'src/db/supabase'


const Protect = ({children}) => {
  // const {user,isLoading} = useUser()
  const {auth,isauth}=supabase.auth.getSession()
  const{user,isLoading}=supabase.auth.getUser()
  const [authenticatedState, setAuthenticatedState] = useState('not-authenticated')
  const Router = useRouter()
  useEffect(()=>{
  if(!isLoading && !user){
    
    Router.replace('/auth/login')
      }
 
},[isLoading,user,Router,auth,isauth])
  return (
   <> {children}
  )
}

export default Protect

下面是我的受保护页面:

import Head from 'next/head';
import { subDays, subHours } from 'date-fns';
import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { OverviewBudget } from 'src/sections/overview/overview-budget';
import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders';
import { OverviewLatestProducts } from 'src/sections/overview/overview-latest-products';
import { OverviewSales } from 'src/sections/overview/overview-sales';
import { OverviewTasksProgress } from 'src/sections/overview/overview-tasks-progress';
import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-customers';
import { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit';
import { OverviewTraffic } from 'src/sections/overview/overview-traffic';
// import {useUser} from 'src/contexts/user'
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Protect from 'src/contexts/Protect';
import { supabase } from 'src/db/supabase';


const now = new Date();

const Page = () => {
  const router = useRouter()
  // const user = useUser()
  
  useEffect(()=>{
    const user = supabase.auth.getUser()
    if(!user){
      router.push('/auth/login')
    }
  })
 
  return(
    
  <>
    
      
        
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
        
      
    
  
  
  )
  
};

Page.getLayout = (page) => (
  
    {page}
  
);

export default Page;

我尝试使用supabase中的getUser()钩子从supabase获取用户,但它不起作用

P粉111627787
P粉111627787

全部回复(1)
P粉269530053

.getUser() 是一个异步方法,所以你必须使用 await 来获取值,它只返回 data error 对象,所以没有 user isLoading

const { data, error } = await supabase.auth.getUser()

您可以在 useEffect 中调用 .getUser() ,如果 data 为空,则将用户路由到登录页面。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号