我透過建立一個保護頁面來實現路由保護，每當使用者未登入時，我都會將其包裝在要保護的頁面中，但是如果使用者登入了，他/她就會回到登入頁面，我想知道什麼我的保護頁面遺失了。以下是我在 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(
<Protect>
<>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8
}}
>
<Container maxWidth="xl">
<Grid
container
spacing={3}
>
<Grid
xs={12}
sm={6}
lg={3}
>
<OverviewBudget
difference={12}
positive
sx={{ height: '100%' }}
value="k"
/>
</Grid>
<Grid
xs={12}
sm={6}
lg={3}
>
<OverviewTotalCustomers
difference={16}
positive={false}
sx={{ height: '100%' }}
value="1.6k"
/>
</Grid>
<Grid
xs={12}
sm={6}
lg={3}
>
<OverviewTasksProgress
sx={{ height: '100%' }}
value={75.5}
/>
</Grid>
<Grid
xs={12}
sm={6}
lg={3}
>
<OverviewTotalProfit
sx={{ height: '100%' }}
value="k"
/>
</Grid>
<Grid
xs={12}
lg={8}
>
<OverviewSales
chartSeries={[
{
name: 'This year',
data: [18, 16, 5, 8, 3, 14, 14, 16, 17, 19, 18, 20]
},
{
name: 'Last year',
data: [12, 11, 4, 6, 2, 9, 9, 10, 11, 12, 13, 13]
}
]}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={6}
lg={4}
>
<OverviewTraffic
chartSeries={[63, 15, 22]}
labels={['Desktop', 'Tablet', 'Phone']}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={6}
lg={4}
>
<OverviewLatestProducts
products={[
{
id: '5ece2c077e39da27658aa8a9',
image: '/assets/products/product-1.png',
name: 'Healthcare Erbology',
updatedAt: subHours(now, 6).getTime()
},
{
id: '5ece2c0d16f70bff2cf86cd8',
image: '/assets/products/product-2.png',
name: 'Makeup Lancome Rouge',
updatedAt: subDays(subHours(now, 8), 2).getTime()
},
{
id: 'b393ce1b09c1254c3a92c827',
image: '/assets/products/product-5.png',
name: 'Skincare Soja CO',
updatedAt: subDays(subHours(now, 1), 1).getTime()
},
{
id: 'a6ede15670da63f49f752c89',
image: '/assets/products/product-6.png',
name: 'Makeup Lipstick',
updatedAt: subDays(subHours(now, 3), 3).getTime()
},
{
id: 'bcad5524fe3a2f8f8620ceda',
image: '/assets/products/product-7.png',
name: 'Healthcare Ritual',
updatedAt: subDays(subHours(now, 5), 6).getTime()
}
]}
sx={{ height: '100%' }}
/>
</Grid>
<Grid
xs={12}
md={12}
lg={8}
>
<OverviewLatestOrders
orders={[
{
id: 'f69f88012978187a6c12897f',
ref: 'DEV1049',
amount: 30.5,
customer: {
name: 'Ekaterina Tankova'
},
createdAt: 1555016400000,
status: 'pending'
},
{
id: '9eaa1c7dd4433f413c308ce2',
ref: 'DEV1048',
amount: 25.1,
customer: {
name: 'Cao Yu'
},
createdAt: 1555016400000,
status: 'delivered'
},
{
id: '01a5230c811bd04996ce7c13',
ref: 'DEV1047',
amount: 10.99,
customer: {
name: 'Alexa Richardson'
},
createdAt: 1554930000000,
status: 'refunded'
},
]}
sx={{ height: '100%' }}
/>
</Grid>
</Grid>
</Container>
</Box>
</>
</Protect>
)
};
Page.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default Page;
我嘗試使用supabase中的getUser()鉤子從supabase取得用戶，但它不起作用
P粉2695300532024-04-07 00:30:27
.getUser() 是一個非同步方法，所以你必須使用await 來取得值，它只會傳回data 和error 對象，所以沒有user 或isLoading 。
const { data, error } = await supabase.auth.getUser()
您可以在 useEffect 中呼叫 .getUser() ，如果 data 為空，則將使用者路由到登入頁面。