Ant-design-pro: [version 2.0] How to redirect to login page if not logged in?

Created on 4 Sep 2018  ·  14Comments  ·  Source: ant-design/ant-design-pro

In version 1.x it redirects to login page when not logged in, how to do it in version 2.0?

There's only page/Authorized.js (https://github.com/ant-design/ant-design-pro/blob/master/src/pages/Authorized.js) which shows 403 when user has no permission.

Couldn't find the config to redirect like in src/router.js (https://github.com/ant-design/ant-design-pro/blob/v1/src/router.js) in version 1.x.

🛑 bug

Most helpful comment

Is our negligence, we will add jump

All 14 comments

Is our negligence, we will add jump

Related issue #2158

In the meantime I made following changes:

  1. src/utils/authority.js
@@ -6,12 +6,10 @@ export function getAuthority() {
     if (authority.includes('[')) {
       authority = JSON.parse(authority);
     } else {
       authority = [authority];
     }
-  } else {
-    authority = ['admin'];
   }
   return authority;
 }

 export function setAuthority(authority) {
  1. src/pages/Authorized.js
@@ -1,37 +1,45 @@
 import React from 'react';
+import { Redirect } from 'react-router-dom';
 import RenderAuthorized from '@/components/Authorized';
 import Exception from '@/components/Exception';
 import { matchRoutes } from 'react-router-config';
 import uniq from 'lodash/uniq';
 import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
+import { getAuthority } from '@/utils/authority';

 const Authorized = RenderAuthorized(['admin', 'user']);

 export default ({ children, route, location }) => {
-  const routes = matchRoutes(route.routes, location.pathname);
-  let authorities = [];
-  routes.forEach(item => {
-    if (Array.isArray(item.route.authority)) {
-      authorities = authorities.concat(item.route.authority);
-    } else if (typeof item.route.authority === 'string') {
-      authorities.push(item.route.authority);
-    }
-  });
-  const noMatch = (
-    <Exception
-      type="403"
-      desc={formatMessage({ id: 'app.exception.description.403' })}
-      linkElement={Link}
-      backText={formatMessage({ id: 'app.exception.back' })}
-    />
-  );
-  return (
-    <Authorized
-      authority={authorities.length === 0 ? undefined : uniq(authorities)}
-      noMatch={noMatch}
-    >
-      {children}
-    </Authorized>
-  );
+  const authority = getAuthority();
+
+  if (authority) {
+    const routes = matchRoutes(route.routes, location.pathname);
+    let authorities = [];
+    routes.forEach(item => {
+      if (Array.isArray(item.route.authority)) {
+        authorities = authorities.concat(item.route.authority);
+      } else if (typeof item.route.authority === 'string') {
+        authorities.push(item.route.authority);
+      }
+    });
+    const noMatch = (
+      <Exception
+        type="403"
+        desc={formatMessage({ id: 'app.exception.description.403' })}
+        linkElement={Link}
+        backText={formatMessage({ id: 'app.exception.back' })}
+      />
+    );
+    return (
+      <Authorized
+        authority={authorities.length === 0 ? undefined : uniq(authorities)}
+        noMatch={noMatch}
+      >
+        {children}
+      </Authorized>
+    );
+  }
+
+  return <Redirect to='/login/login'/>;
 };

没有authority就重定向到login,其余不变

Authorized.js

getAuthority() ? (
  <Authorized
    authority={authorities.length === 0 ? undefined : intersection(...authorities)}
    noMatch={noMatch}
  >
    {children}
  </Authorized>
) : <Redirect to='/user/login' />

getAuthority() 登录一次之后不是就一直有值了吗?
@yupeilin123

@yupeilin123 If you look at src/utils/authority.js it always returns authority.

可以用一个sessionStorage来判断是否已登录 ,getIsLogin()
@alpha-hxb

You can modify files. It is not necessary to refer to v2.
你可以修改文件。不一定要参照v2.
目前我的做法是通过sessionStorage来判断是否已登录,如果登录走basicLayout, 否则走userLayout
@digz6666

should getAuthority really return ['admin'] as a final fallback? if nothing is set in localStorage, shouldn't it default to 'guest' maybe?

https://github.com/ant-design/ant-design-pro/blob/231e725abd99c91c4304001fbf784f426f85925e/src/utils/authority.js#L16

should getAuthority really return ['admin'] as a final fallback? if nothing is set in localStorage, shouldn't it default to 'guest' maybe?

ant-design-pro/src/utils/authority.js

Line 16 in 231e725

return authority || ['admin'];

@NickFranceschina I think it shouldn't.

or why does checkPermission default to "View all by default"?

ant-design-pro/src/components/Authorized/CheckPermissions.js

Lines 22 to 26 in 231e725

// 没有判定权限.默认查看所有
// Retirement authority, return target;
if (!authority) {
return target;
}

For this instance you can customize whatever you want :)

@digz6666 oh I see you already pointed this out 14days ago... apologies :smile:

image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Yoping picture Yoping  ·  3Comments

cheung1111 picture cheung1111  ·  3Comments

2uncle-code picture 2uncle-code  ·  3Comments

yadongxie150 picture yadongxie150  ·  3Comments

ghost picture ghost  ·  3Comments