人。我有一个关于Next.js和React的项目,它没有使用任何库进行路由。我应该如何为未经过身份验证的用户实施路由保护(受保护的路由)?或者,如果cookie中没有令牌,我应该重定向它们。 Tnx!
答案 0 :(得分:4)
您可以使用某些approp签入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(我是作者)。
答案 1 :(得分:1)
我对此有很多问题,但最终成功地解决了问题。
我正在使用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
}
答案 2 :(得分:-5)
使用react-router库。它小而简单。另外,我猜next.js也支持路由。请检查他们的文件。