- 添加菜单权限控制

admin-web/mock/user.js

 // 代码中会兼容本地 service mock 以及部署站点的静态数据
+// import { stringify } from 'qs';
+
 export default {
   // 支持值为 Object 和 Array
   'GET /api/currentUser': {
@@ -72,28 +74,24 @@ export default {
       address: 'Sidney No. 1 Lake Park',
     },
   ],
-  'POST /api/login/account': (req, res) => {
-    const { password, userName, type } = req.body;
-    if (password === 'ant.design' && userName === 'admin') {
+  'POST /admin-api/admin/passport/login': (req, res) => {
+    const { password, username } = req.body;
+    if (password === 'admin' && username === 'admin') {
       res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'admin',
-      });
-      return;
-    }
-    if (password === 'ant.design' && userName === 'user') {
-      res.send({
-        status: 'ok',
-        type,
-        currentAuthority: 'user',
+        code: 0,
+        data: {
+          accessToken: '2e3d7635c15e47e997611707a237859f',
+          expiresIn: 2879,
+          refreshToken: 'd091e7c35bbb4313b0f557a6ef23d033',
+        },
+        message: 'string',
       });
       return;
     }
     res.send({
-      status: 'error',
-      type,
-      currentAuthority: 'guest',
+      code: 1000,
+      data: {},
+      message: '账号或密码错误!',
     });
   },
   'POST /api/register': (req, res) => {

admin-web/src/models/login.js

@@ -4,6 +4,7 @@ import { fakeAccountLogin, getFakeCaptcha } from '@/services/api';
 import { setAuthority } from '@/utils/authority';
 import { getPageQuery } from '@/utils/utils';
 import { reloadAuthorized } from '@/utils/Authorized';
+import { setLoginToken } from '../utils/cache';
 
 export default {
   namespace: 'login',
@@ -19,8 +20,15 @@ export default {
         type: 'changeLoginStatus',
         payload: response,
       });
+      yield put(routerRedux.replace('/'));
+
       // Login successfully
-      if (response.status === 'ok') {
+      if (response.code === 0) {
+        // 保存 token 到 localStorage，发送请求的时候，会自动取 token 放到 header
+        setLoginToken(response.data.accessToken, response.data.refreshToken);
+        // 此处直接设置为 admin、和 user 角色，因为暂时不做服务控制前段 角色
+        setAuthority(['admin', 'user']);
+
         reloadAuthorized();
         const urlParams = new URL(window.location.href);
         const params = getPageQuery();

admin-web/src/pages/Authorized.js

@@ -4,10 +4,16 @@ import { getAuthority } from '@/utils/authority';
 import Redirect from 'umi/redirect';
 
 const Authority = getAuthority();
+
+// TODO RenderAuthorized 暂时写死为 admin，次组件集成于 antd-pro 后期有时间处理，（可能有用，可能没用）
+// TODO 可大致分为两种角色，admin 管理员角色，user 代表其他非授权页面，可以公开的
+// const Authorized = RenderAuthorized(['admin', 'user']);
 const Authorized = RenderAuthorized(Authority);
 
-export default ({ children }) => (
-  <Authorized authority={children.props.route.authority} noMatch={<Redirect to="/user/login" />}>
-    {children}
-  </Authorized>
-);
+export default ({ children }) => {
+  return (
+    <Authorized authority={children.props.route.authority} noMatch={<Redirect to="/user/login" />}>
+      {children}
+    </Authorized>
+  );
+};

admin-web/src/pages/User/Login.js

@@ -24,7 +24,7 @@ class LoginPage extends Component {
 
   onGetCaptcha = () =>
     new Promise((resolve, reject) => {
-      this.loginForm.validateFields(['mobile'], {}, (err, values) => {
+      this.loginForm.validateFields(['username'], {}, (err, values) => {
         if (err) {
           reject(err);
         } else {
@@ -82,7 +82,7 @@ class LoginPage extends Component {
               !submitting &&
               this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
             <UserName
-              name="userName"
+              name="username"
               placeholder={`${formatMessage({ id: 'app.login.userName' })}: admin or user`}
               rules={[
                 {
@@ -93,7 +93,7 @@ class LoginPage extends Component {
             />
             <Password
               name="password"
-              placeholder={`${formatMessage({ id: 'app.login.password' })}: ant.design`}
+              placeholder={`${formatMessage({ id: 'app.login.password' })}: admin`}
               rules={[
                 {
                   required: true,
@@ -114,7 +114,7 @@ class LoginPage extends Component {
                 formatMessage({ id: 'app.login.message-invalid-verification-code' })
               )}
             <Mobile
-              name="mobile"
+              name="username"
               placeholder={formatMessage({ id: 'form.phone-number.placeholder' })}
               rules={[
                 {
@@ -128,7 +128,7 @@ class LoginPage extends Component {
               ]}
             />
             <Captcha
-              name="captcha"
+              name="password"
               placeholder={formatMessage({ id: 'form.verification-code.placeholder' })}
               countDown={120}
               onGetCaptcha={this.onGetCaptcha}

admin-web/src/services/api.js

@@ -104,7 +104,7 @@ export async function updateFakeList(params) {
 }
 
 export async function fakeAccountLogin(params) {
-  return request('/api/login/account', {
+  return request(`/admin-api/admin/passport/login/?${stringify(params)}`, {
     method: 'POST',
     body: params,
   });