Menjaga laluan Next.js dengan Supabase
Saya melaksanakan perlindungan laluan dengan membuat halaman perlindungan, setiap kali pengguna tidak log masuk, saya membungkusnya dalam halaman untuk dilindungi, tetapi jika pengguna log masuk, dia dikembalikan ke halaman log masuk, saya mahu tahu Apa halaman dilindungi saya tiada. Inilah yang saya laksanakan dalam 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
Ini adalah halaman dilindungi saya:
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;
Saya cuba mendapatkan pengguna dari supabase menggunakan cangkuk getUser() dalam supabase tetapi ia tidak berfungsi
