search

ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.4k stars 8.14k forks source link

请问各位这个bug如何优化？登录拦截不生效，出现先进入主页（也触发了后端获取当前用户接口），再重定向回登录页？ #3808

Closed zhuguangyue closed 5 years ago

zhuguangyue commented 5 years ago

image

chenshuai2144 commented 5 years ago

你可以新建一个路由叫 / 里面做一个高阶组件，专门用于控制权限

zhuguangyue commented 5 years ago

你可以新建一个路由叫 / 里面做一个高阶组件，专门用于控制权限 兄弟有没有案例参考啊？

chenshuai2144 commented 5 years ago

需要自己写一个了。 @xiaohuoni 要不要完善一下你现在的 ，在 basicLayout里面会有些问题

xiaohuoni commented 5 years ago

在这里试了一下，https://preview.pro.ant.design ，会跳转到登录页的。

在 basicLayout里面会有些问题

具体问题是啥？

zhuguangyue commented 5 years ago

在这里试了一下，https://preview.pro.ant.design ，会跳转到登录页的。

在 basicLayout里面会有些问题

具体问题是啥？

我使用master分支新拉下来的代码，使用开发模式，用断点调试的时候发现，登录拦截出现先进入主页再重定向回登录页的现象（进入主页面同时也触发获取当前登录用户接口）；其次，已经正常登录后，在主页面访问登录页面地址时，回正常停留在登录页面，原则上不是已经登录状态，再次访问登录页面会自动重定向回到登录后主页面吗？

xiaohuoni commented 5 years ago

使用开发模式，用断点调试的时候发现，登录拦截出现先进入主页再重定向回登录页的现象（进入主页面同时也触发获取当前登录用户接口）

发起请求放在了layout的话，会有这个问题，感觉挺正常。

其次，已经正常登录后，在主页面访问登录页面地址时，回正常停留在登录页面，原则上不是已经登录状态，再次访问登录页面会自动重定向回到登录后主页面吗？

直接访问登录页面，需要自动跳转需要自己判断，但是我觉得这么做不友好，用户可能想更换登录账号

chenshuai2144 commented 5 years ago

增加一个更高级别的layout 来解决一下这个问题。

xiaohuoni commented 5 years ago

这个和Authorized加入的时机有关，我不知道更高级的layout要加到哪里

 path: '/',
 component: '../layouts/BasicLayout',
 Routes: ['src/pages/Authorized'],
<BasicLayout>
    <Authorized>
        {children}
    </Authorized>
</BasicLayout>
chenshuai2144 commented 5 years ago

/ 里面直接放 Authorized 不要放BasicLayout' 好了

xiaohuoni commented 5 years ago

那不是子级路由，要每个都加上 BasicLayout

chenshuai2144 commented 5 years ago

没有增加一层抽象解决不了的问题

xiaohuoni commented 5 years ago

什么骚操作？指导一下。

chenshuai2144 commented 5 years ago 
{
 path:"/",
 component: '../layouts/Authorized',
 Routes: [{
      path:"/",
      component: '../layouts/BasicLayout',
  }],
}
xiaohuoni commented 5 years ago

这样不会变成//吗？ --- 不会

chenshuai2144 commented 5 years ago

try it

xiaohuoni commented 5 years ago

好像有点丑

export default [
  // user
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      { path: '/user', redirect: '/user/login' },
      { path: '/user/login', name: 'login', component: './User/Login' },
      { path: '/user/register', name: 'register', component: './User/Register' },
      {
        path: '/user/register-result',
        name: 'register.result',
        component: './User/RegisterResult',
      },
      {
        component: '404',
      },
    ],
  },
  // app
  {
    path: '/',
    component: '../layouts/BlankLayout',
    Routes: ['src/pages/Authorized'],
    routes: [
      {
        path: '/',
        component: '../layouts/BasicLayout',
        routes: [
          // dashboard
          { path: '/', redirect: '/dashboard/analysis', authority: ['admin', 'user'] },
          {
            path: '/dashboard',
            name: 'dashboard',
            icon: 'dashboard',
            routes: [
              {
                path: '/dashboard/analysis',
                name: 'analysis',
                component: './Dashboard/Analysis',
              },
              {
                path: '/dashboard/monitor',
                name: 'monitor',
                component: './Dashboard/Monitor',
              },
              {
                path: '/dashboard/workplace',
                name: 'workplace',
                component: './Dashboard/Workplace',
              },
            ],
          },
          // forms
          {
            path: '/form',
            icon: 'form',
            name: 'form',
            routes: [
              {
                path: '/form/basic-form',
                name: 'basicform',
                component: './Forms/BasicForm',
              },
              {
                path: '/form/step-form',
                name: 'stepform',
                component: './Forms/StepForm',
                hideChildrenInMenu: true,
                routes: [
                  {
                    path: '/form/step-form',
                    redirect: '/form/step-form/info',
                  },
                  {
                    path: '/form/step-form/info',
                    name: 'info',
                    component: './Forms/StepForm/Step1',
                  },
                  {
                    path: '/form/step-form/confirm',
                    name: 'confirm',
                    component: './Forms/StepForm/Step2',
                  },
                  {
                    path: '/form/step-form/result',
                    name: 'result',
                    component: './Forms/StepForm/Step3',
                  },
                ],
              },
              {
                path: '/form/advanced-form',
                name: 'advancedform',
                authority: ['admin'],
                component: './Forms/AdvancedForm',
              },
            ],
          },
          // list
          {
            path: '/list',
            icon: 'table',
            name: 'list',
            routes: [
              {
                path: '/list/table-list',
                name: 'searchtable',
                component: './List/TableList',
              },
              {
                path: '/list/basic-list',
                name: 'basiclist',
                component: './List/BasicList',
              },
              {
                path: '/list/card-list',
                name: 'cardlist',
                component: './List/CardList',
              },
              {
                path: '/list/search',
                name: 'searchlist',
                component: './List/List',
                routes: [
                  {
                    path: '/list/search',
                    redirect: '/list/search/articles',
                  },
                  {
                    path: '/list/search/articles',
                    name: 'articles',
                    component: './List/Articles',
                  },
                  {
                    path: '/list/search/projects',
                    name: 'projects',
                    component: './List/Projects',
                  },
                  {
                    path: '/list/search/applications',
                    name: 'applications',
                    component: './List/Applications',
                  },
                ],
              },
            ],
          },
          {
            path: '/profile',
            name: 'profile',
            icon: 'profile',
            routes: [
              // profile
              {
                path: '/profile/basic',
                name: 'basic',
                component: './Profile/BasicProfile',
              },
              {
                path: '/profile/basic/:id',
                name: 'basic',
                hideInMenu: true,
                component: './Profile/BasicProfile',
              },
              {
                path: '/profile/advanced',
                name: 'advanced',
                authority: ['admin'],
                component: './Profile/AdvancedProfile',
              },
            ],
          },
          {
            name: 'result',
            icon: 'check-circle-o',
            path: '/result',
            routes: [
              // result
              {
                path: '/result/success',
                name: 'success',
                component: './Result/Success',
              },
              { path: '/result/fail', name: 'fail', component: './Result/Error' },
            ],
          },
          {
            name: 'exception',
            icon: 'warning',
            path: '/exception',
            routes: [
              // exception
              {
                path: '/exception/403',
                name: 'not-permission',
                component: './Exception/403',
              },
              {
                path: '/exception/404',
                name: 'not-find',
                component: './Exception/404',
              },
              {
                path: '/exception/500',
                name: 'server-error',
                component: './Exception/500',
              },
              {
                path: '/exception/trigger',
                name: 'trigger',
                hideInMenu: true,
                component: './Exception/TriggerException',
              },
            ],
          },
          {
            name: 'account',
            icon: 'user',
            path: '/account',
            routes: [
              {
                path: '/account/center',
                name: 'center',
                component: './Account/Center/Center',
                routes: [
                  {
                    path: '/account/center',
                    redirect: '/account/center/articles',
                  },
                  {
                    path: '/account/center/articles',
                    component: './Account/Center/Articles',
                  },
                  {
                    path: '/account/center/applications',
                    component: './Account/Center/Applications',
                  },
                  {
                    path: '/account/center/projects',
                    component: './Account/Center/Projects',
                  },
                ],
              },
              {
                path: '/account/settings',
                name: 'settings',
                component: './Account/Settings/Info',
                routes: [
                  {
                    path: '/account/settings',
                    redirect: '/account/settings/base',
                  },
                  {
                    path: '/account/settings/base',
                    component: './Account/Settings/BaseView',
                  },
                  {
                    path: '/account/settings/security',
                    component: './Account/Settings/SecurityView',
                  },
                  {
                    path: '/account/settings/binding',
                    component: './Account/Settings/BindingView',
                  },
                  {
                    path: '/account/settings/notification',
                    component: './Account/Settings/NotificationView',
                  },
                ],
              },
            ],
          },
          //  editor
          {
            name: 'editor',
            icon: 'highlight',
            path: '/editor',
            routes: [
              {
                path: '/editor/flow',
                name: 'flow',
                component: './Editor/GGEditor/Flow',
              },
              {
                path: '/editor/mind',
                name: 'mind',
                component: './Editor/GGEditor/Mind',
              },
              {
                path: '/editor/koni',
                name: 'koni',
                component: './Editor/GGEditor/Koni',
              },
            ],
          },
          {
            component: '404',
          },
        ],
      },
    ],
  },
];
xiaohuoni commented 5 years ago

这么处理的话，在约定式路由里面，没有对应的解决方案

chenshuai2144 commented 5 years ago

是的，但是 配置路由明显更棒

xiaohuoni commented 5 years ago

并不会，我感觉约定路由才能完美匹配blocks

Thyiad commented 5 years ago

看上去，这个大写的Routes是来做这个验证的。代码里做了auth，及login跳转。 不过没看到文档在哪里有说明呀？

Thyiad commented 5 years ago

好吧，umi里面看到了

maokty commented 5 years ago

这个最后怎么解决了？

yunsii commented 5 years ago

呃 然后就没有然后了？我想在 BasicLayout 加个 componentWillMount 方法去判断，但是总感觉怪怪的(:3J∠)

chenshuai2144 commented 5 years ago

@theprimone 在外面封装不要用 componentWillMount ，可能影响升级 react@17 高阶组件是最好的选择

class AuthBasicLayout extends React.comppntent {
  state = {
    loading: true
  };
  async did() {
    await something();
    this.setState({
      loading: false
    });
  }
  render() {
    if (this.state.loading) {
      return "loading";
    }
    return <BasicLayout />;
  }
}
Thyiad commented 5 years ago

@theprimone 我是直接在里面加了个判断 if(getAuthority()[0] !== 'guest'){ dispatch({ type: 'user/fetchCurrent', }); dispatch({ type: 'global/fetchNotices', }) }

yunsii commented 5 years ago

@Thyiad 相比之下，还是用 @chenshuai2144 大佬的方案吧。这样单独处理权限，更清晰一些。

Tian0301 commented 5 years ago

@theprimone 在外面封装不要用 componentWillMount ，可能影响升级 react@17 高阶组件是最好的选择

class AuthBasicLayout extends React.comppntent {
  state = {
    loading: true
  };
  async did() {
    await something();
    this.setState({
      loading: false
    });
  }
  render() {
    if (this.state.loading) {
      return "loading";
    }
    return <BasicLayout />;
  }
}

@chenshuai2144 大佬 这个高阶组件该怎么应用呢 我还是有点没搞清楚😂

yunsii commented 5 years ago

@TSywan 应该是把/路由到AuthBasicLayout即可，在里边做权限验证。只是感觉和Routes: ['src/pages/Authorized']有奇怪的交集。

Tian0301 commented 5 years ago

@theprimone 我对高阶组件没什么了解 😂 所有想找个例子参考一下

Thyiad commented 5 years ago

对呀，所以我觉得没必要，直接在didmount里面加个判断就好了，非要搞个组件反而更繁琐

Tian0301 commented 5 years ago

大佬说的好像是不要在BasicLayout里边使用componentWillMount ，React V17会去除这个钩子，会影响到React升级，所以要用高阶组件来封装。 @Thyiad 兄弟 你在didMount里边做判断，会在比如说 ： 页面没有权限的时候跳转到403 页面（这个403页面是没有顶部菜单和侧边栏那个）的时候， 报内存溢出的问题吗？

Thyiad commented 5 years ago

@TSywan 感觉跟你说的不是一个东西，他原代码就是在didmount里面发请求，获取当前用户信息，以及提醒列表。 未登录时会跳转登录，登陆后再回来。因为请求是在layout里面，所以跳转登录之前会被触发。 所以同理，你只要加个判断，确定是登陆后再触发请求即可。 因为getauth默认是guest，所以你只需要判断当前角色不是guest，就发起请求就行。 很简单的事，干嘛要再封一层组件？？无法理解

Tian0301 commented 5 years ago

@TSywan 感觉跟你说的不是一个东西，他原代码就是在didmount里面发请求，获取当前用户信息，以及提醒列表。 未登录时会跳转登录，登陆后再回来。因为请求是在layout里面，所以跳转登录之前会被触发。 所以同理，你只要加个判断，确定是登陆后再触发请求即可。 因为getauth默认是guest，所以你只需要判断当前角色不是guest，就发起请求就行。 很简单的事，干嘛要再封一层组件？？无法理解

不好意思 那个组件报内存溢出的问题跟判断是否登录的好像没关系 😂 我给搞混了

beyoug commented 5 years ago

@theprimone 在外面封装不要用 componentWillMount ，可能影响升级 react@17 高阶组件是最好的选择

class AuthBasicLayout extends React.comppntent {
  state = {
    loading: true
  };
  async did() {
    await something();
    this.setState({
      loading: false
    });
  }
  render() {
    if (this.state.loading) {
      return "loading";
    }
    return <BasicLayout />;
  }
}

这个高阶组件有应用到框架吗？具体怎么用呢？

beyoug commented 5 years ago

@theprimone @chenshuai2144 这一块能讲的具体一点吗

yunsii commented 5 years ago

@VeChar 从服务器请求菜单之后我把请求菜单的 action 放到了 pages/Authorized.js，要做的话应该可以在请求菜单完成之后再发起其他 action

pkaq commented 2 years ago

@chenshuai2144 @xiaohuoni 新版本好像不适用了?

zhuguangyue commented 2 years ago

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。