我有一个关于Next.js和React的项目,它没有使用任何库进行路由。我应该如何为未经身份验证的用户实现路由守卫(受保护的路由)?或者如果cookie中没有令牌,我应该直接重定向它们?
pbpqsu0x1#
您可以使用一些适当的逻辑来检查getInitialProps,评估cookie以决定是否重定向。
getInitialProps
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(我是作者)。
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 }
a2mppw5e3#
您可以使用https://www.npmjs.com/package/next-router-guards库。在那里,您可以使用现有的保护选项自定义页面的访问设置,或者使用自定义逻辑创建自己的保护。如果您想检查用户是否使用令牌授权,您可以使用AuthorizedGuard(例如https://github.com/makskiyko/next-router-guards/blob/master/exmaples/AuthorizedGuard.md)
3条答案
按热度按时间pbpqsu0x1#
您可以使用一些适当的逻辑来检查
getInitialProps
,评估cookie以决定是否重定向。看看这个示例代码https://github.com/lipp/login-with/blob/master/example/nextjs/with-profile.js#L8(我是作者)。
f2uvfpb92#
我对此有很多问题,但最终成功地解决了问题。
我用的是apollo,我的问题是,如果用户没有登录,或者没有特定的角色,我必须在服务器上重定向。这就是它是如何完成的,也许它对你也有帮助:
a2mppw5e3#
您可以使用https://www.npmjs.com/package/next-router-guards库。在那里,您可以使用现有的保护选项自定义页面的访问设置,或者使用自定义逻辑创建自己的保护。如果您想检查用户是否使用令牌授权,您可以使用AuthorizedGuard(例如https://github.com/makskiyko/next-router-guards/blob/master/exmaples/AuthorizedGuard.md)