Maison > Questions et réponses > le corps du texte
J'ai implémenté la protection de route en créant une page de protection, chaque fois que l'utilisateur n'est pas connecté, je l'enveloppe dans la page à protéger, mais si l'utilisateur est connecté, il est renvoyé à la page de connexion, je veux savoir ce qui manque à ma page protégée. Voici ce que j'ai implémenté dans 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
Voici ma page protégée :
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;
J'ai essayé d'obtenir un utilisateur de supabase en utilisant le hook getUser() dans supabase mais cela ne fonctionne pas
P粉2695300532024-04-07 00:30:27
.getUser()
是一个异步方法,所以你必须使用 await
来获取值,它只返回 data
和 error
对象,所以没有 user
或 isLoading
.
const { data, error } = await supabase.auth.getUser()
Vous pouvez diriger l'utilisateur vers la page de connexion si useEffect
中调用 .getUser()
,如果 data
est vide.