时间戳

首页 > 解决方案 > React Next js 应用重定向到登录还为时过早

reactjs - React Next js 应用重定向到登录还为时过早

问题描述

经过几个小时的大量搜索后，如果未登录，我有以下代码可以从用户个人资料页面重定向。

注意：简单地显示一个未经授权的页面很容易，但它的重定向把事情搞砸了。

该代码在用户未登录时执行重定向工作。

const Dashboard = () => {  
  const [user, { mutate }] = useCurrentUser();
  const router = useRouter();
  useEffect(() => {
    // redirect to login if user is not authenticated
    if (!user) router.push('/login');
  }, [user]);
...

问题是当用户登录并直接转到 /user/dashboard 路由时，一瞬间，用户未定义可能因此重定向到登录。当它登录时，它发现用户已通过身份验证，因此重定向到主页，因为我正在将登录用户重定向到主页。

如何防止页面首次加载时出现“非用户”状态的瞬间？

我试过了 -

  1. 获取初始道具
  2. getServerSideProps - 不能使用路由器，因为下一个路由器只能在客户端使用
  3. componentDidMount - UseEffectI 上面尝试过的等价物是否正确？

编辑：根据下面的答案，我尝试了这个，但仍然直接让用户先登录。我正在使用反应 cookie，当用户登录时，我确实看到登录 cookie 为真，而当用户未登录时，它未设置。

Dashboard.getInitialProps = ({ req, res }) => {
  console.log(req.headers.cookie)
  var get_cookies = function(request) {
    var cookies = {};
    request.headers && request.headers.cookie.split(';').forEach(function(cookie) {
      var parts = cookie.match(/(.*?)=(.*)$/)
      cookies[ parts[1].trim() ] = (parts[2] || '').trim();
    });
    return cookies;
  };

  //console.log(get_cookies(req)['loggedIn']);

  if (get_cookies(req)['loggedIn'] == true) {
    console.log("entered logged in")
    return {loggedIn: true};
  }
  else {
    console.log("entered not logged in")// can see this on server console log
  // User is not logged in, redirect.
  if (res) {
      // We're on the server.
      res.writeHead(301, { Location: '/login' });
      res.end();
    } else {
      // We're on the client.
      Router.push('/login');
    }
  }
}

标签： reactjsnext.js

解决方案

您可以在未在getServerSideProps中进行身份验证时实现重定向 下面的示例基于带有 cookie 的 JWT 身份验证。

export const getServerSideProps = async (ctx) => {
    const cookie = ctx.req.headers.cookie;
    const config = {
        headers: {
            cookie: cookie ?? null
        }
    }
    let res;
    try {
        // your isAuthenticated check
        const res = await axios('url', config);
        return { props: { user: res.data } };
    } catch (err) {
        console.error(err);
        ctx.res.writeHead(302, {
            Location: 'redirectUrl'
        })
        ctx.res.end();
        return;
        return { props: { user: null } };
    }
}

推荐阅读