reactjs Next.js中的路由守卫+ react

piwo6bdm  于 2023-03-22  发布在  React
关注(0)|答案(3)|浏览(327)

我有一个关于Next.js和React的项目,它没有使用任何库进行路由。我应该如何为未经身份验证的用户实现路由守卫(受保护的路由)?或者如果cookie中没有令牌,我应该直接重定向它们?

pbpqsu0x

pbpqsu0x1#

您可以使用一些适当的逻辑来检查getInitialProps,评估cookie以决定是否重定向。

import Router from 'next/router'

const redirectToLogin = res => {  
  if (res) {
    res.writeHead(302, {Location: '/login'})
    res.end()
    res.finished = true
  } else {
    Router.push('/login')
  }
}

class ProtectedPage extends React.Component {
  static async getInitialProps ({req, res}) {
    // get cookie from req.headers or from document.cookie in browser
    // this cookie must not contain sensitive information!
    const profile = getProfileFromCookie(req)
    if (!profile) {
      redirectToLogin(res)
    }
  }
}

看看这个示例代码https://github.com/lipp/login-with/blob/master/example/nextjs/with-profile.js#L8(我是作者)。

f2uvfpb9

f2uvfpb92#

我对此有很多问题,但最终成功地解决了问题。
我用的是apollo,我的问题是,如果用户没有登录,或者没有特定的角色,我必须在服务器上重定向。这就是它是如何完成的,也许它对你也有帮助:

import { gql } from 'apollo-boost'
import initApollo from '~/config/init-apollo'
import { Role } from '~/generated/apollo-components'
import { NextPage } from '~/node_modules/next'
import redirect from '~/utils/redirect'
import { parseCookies } from '~/utils/with-apollo'

const GET_USER_ROLE = gql`
    query {
        me {
            role
        }
    }
`

export default (Page: NextPage<any>, allow: Role[]) => {
  const originalGetInitialProps = Page.getInitialProps
  let pageProps = {}

  Page.getInitialProps = async (ctx) => {
    if (originalGetInitialProps) {
      pageProps = await originalGetInitialProps(ctx)
    }

    const apolloClient = initApollo(
      {},
      { getToken: () => parseCookies(ctx.req).token },
    )

    try {
      const { data } = await apolloClient.query({ query: GET_USER_ROLE })

      if (!allow.includes(data.me.role as Role)) {
        redirect(ctx, '/401')
      }

      return {
        ...pageProps,
      }
    } catch (e) {
      console.log('error: ', e.graphQLErrors[0])
      redirect(ctx, '/login')
    }
  }

  return Page
}
a2mppw5e

a2mppw5e3#

您可以使用https://www.npmjs.com/package/next-router-guards库。在那里,您可以使用现有的保护选项自定义页面的访问设置,或者使用自定义逻辑创建自己的保护。如果您想检查用户是否使用令牌授权,您可以使用AuthorizedGuard(例如https://github.com/makskiyko/next-router-guards/blob/master/exmaples/AuthorizedGuard.md

相关问题