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
.getUser()
是一個異步方法,所以你必須使用 await
來獲取值,它只返回 data
和 error
對象,所以沒有 user
或 isLoading
.
const { data, error } = await supabase.auth.getUser()
Anda boleh menghalakan pengguna ke halaman log masuk jika useEffect
中調(diào)用 .getUser()
,如果 data
kosong.