前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端应用登录逻辑判断

前端应用登录逻辑判断

原创
作者头像
挥刀北上
发布2023-08-10 10:18:34
2710
发布2023-08-10 10:18:34
举报
文章被收录于专栏:Node.js开发

判断登录又两个入口:一是浏览器刷新,判断是否是登录状态,并动态更新全局状态,即store,还有就是登录时,登录成功后,设置登录状态,即store。

再补充一张。

代码如下:

代码语言:javascript
复制
import * as React from 'react';
import { runApp,Redirect } from 'ice';
import LocaleProvider from '@/components/LocaleProvider';
import { getLocale } from '@/utils/locale';
import * as store from 'store';

const locale = getLocale();
const isLogin = async () => {
  console.log('验证是否登录:')
  const credential = store.get('credential');
  const userInfo = store.get('userInfo');
  if (!credential || !userInfo) return [false, {}];
  const DataNow = Date.now();
  if(credential.expiresAt*1000-DataNow<=0) return [false, {}];
  console.log("处于登录状态")
  return [true, userInfo];
}



const appConfig = {
  app: {
    rootId: 'ice-container',
    addProvider: ({ children }) => <LocaleProvider locale={locale}>{children}</LocaleProvider>,
    getInitialData: async() => {
      const [login, user] = await isLogin();

      console.log("是否是登录状态:",login);
      if (!login) {
        return {
          auth: {
            admin: false,
          },
        };
      } else {
        return {
          auth: {
            admin: true,
          },
          initialStates: { user },
        };
      }
    }
  },
  auth: {
    // 可选的,设置无权限时的展示组件,默认为 null
    NoAuthFallback: <Redirect to="/user/login" />,
    // 或者传递一个函数组件
    // NoAuthFallback: () => <div>没有权限..</div>
  },
};
runApp(appConfig);

此处代码中的islogin就是判断是否是登录状态,这个函数返回的是一个数组,数组第一个值为布尔值,标志是否登录,第二个值是判断token时,获取的新数据,这里的token逻辑表现形式有多种,此处是用token重新换取用户信息,更新用户信息。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档