[fix]🐛nacos login page && notice config (#10262)

console-ui/src/constants.js

@@ -24,6 +24,8 @@ export const REDUX_DEVTOOLS = '__REDUX_DEVTOOLS_EXTENSION__';
 
 export const GET_STATE = 'GET_STATE';
 
+export const GET_NOTICE = 'GET_NOTICE';
+
 export const GET_SUBSCRIBERS = 'GET_SUBSCRIBERS';
 export const REMOVE_SUBSCRIBERS = 'REMOVE_SUBSCRIBERS';
 
@@ -40,3 +42,5 @@ export const GET_NAMESPACES = 'GET_NAMESPACES';
 export const GET_CONFIGURATION = 'GET_CONFIGURATION';
 
 export const GLOBAL_PAGE_SIZE_LIST = [10, 20, 30, 50, 100];
+
+export const LOGINPAGE_ENABLED = 'docsite_loginpage';

console-ui/src/globalLib.js

@@ -17,6 +17,7 @@
 import projectConfig from './config';
 import $ from 'jquery';
 import { Message } from '@alifd/next';
+import { LOGINPAGE_ENABLED } from './constants';
 
 function goLogin() {
   const url = window.location.href;
@@ -493,6 +494,13 @@ const request = (function(_global) {
 
     // 处理后置中间件
     config = handleMiddleWare.apply(this, [config, ...args, middlewareBackList]);
+
+    const [url, paramsStr] = config.url.split('?');
+    const params = paramsStr ? paramsStr.split('&') : [];
+
+    const _LOGINPAGE_ENABLED = localStorage.getItem(LOGINPAGE_ENABLED);
+
+    if (_LOGINPAGE_ENABLED !== 'false') {
       let token = {};
       try {
         token = JSON.parse(localStorage.token);
@@ -501,9 +509,8 @@ const request = (function(_global) {
         goLogin();
       }
       const { accessToken = '' } = token;
-    const [url, paramsStr] = config.url.split('?');
-    const params = paramsStr ? paramsStr.split('&') : [];
       params.push(`accessToken=${accessToken}`);
+    }
 
     return $.ajax(
       Object.assign({}, config, {

console-ui/src/index.js

@@ -53,6 +53,7 @@ import Welcome from './pages/Welcome/Welcome';
 
 import reducers from './reducers';
 import { changeLanguage } from './reducers/locale';
+import { getState } from './reducers/base';
 
 import './index.scss';
 import PropTypes from 'prop-types';
@@ -95,11 +96,13 @@ const MENU = [
   { path: '/permissionsManagement', component: PermissionsManagement },
 ];
 
-@connect(state => ({ ...state.locale }), { changeLanguage })
+@connect(state => ({ ...state.locale, ...state.base }), { changeLanguage, getState })
 class App extends React.Component {
   static propTypes = {
     locale: PropTypes.object,
     changeLanguage: PropTypes.func,
+    getState: PropTypes.func,
+    loginPageEnabled: PropTypes.string,
   };
 
   constructor(props) {
@@ -112,15 +115,20 @@ class App extends React.Component {
   }
 
   componentDidMount() {
+    this.props.getState();
     const language = localStorage.getItem(LANGUAGE_KEY);
     this.props.changeLanguage(language);
   }
 
   get router() {
+    const { loginPageEnabled } = this.props;
     return (
       <HashRouter>
         <Switch>
+          {loginPageEnabled && loginPageEnabled === 'false' ? null : (
             <Route path="/login" component={Login} />
+          )}
+          {/* <Route path="/login" component={Login} /> */}
           <Layout>
             {MENU.map(item => (
               <Route key={item.path} {...item} />
@@ -132,13 +140,13 @@ class App extends React.Component {
   }
 
   render() {
-    const { locale } = this.props;
+    const { locale, loginPageEnabled } = this.props;
     return (
       <Loading
         className="nacos-loading"
         shape="flower"
         tip="loading..."
-        visible={false}
+        visible={!loginPageEnabled}
         fullScreen
         {...this.state.nacosLoading}
       >

console-ui/src/layouts/MainLayout.js

@@ -18,15 +18,15 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { ConfigProvider, Icon, Menu } from '@alifd/next';
+import { ConfigProvider, Icon, Menu, Message } from '@alifd/next';
 import Header from './Header';
-import { getState } from '../reducers/base';
+import { getState, getNotice } from '../reducers/base';
 import getMenuData from './menu';
 
 const { SubMenu, Item } = Menu;
 
 @withRouter
-@connect(state => ({ ...state.locale, ...state.base }), { getState })
+@connect(state => ({ ...state.locale, ...state.base }), { getState, getNotice })
 @ConfigProvider.config
 class MainLayout extends React.Component {
   static displayName = 'MainLayout';
@@ -38,11 +38,15 @@ class MainLayout extends React.Component {
     version: PropTypes.any,
     getState: PropTypes.func,
     functionMode: PropTypes.string,
+    authEnabled: PropTypes.string,
     children: PropTypes.object,
+    getNotice: PropTypes.func,
+    notice: PropTypes.string,
   };
 
   componentDidMount() {
     this.props.getState();
+    this.props.getNotice();
   }
 
   goBack() {
@@ -83,7 +87,7 @@ class MainLayout extends React.Component {
   }
 
   render() {
-    const { locale = {}, version, functionMode } = this.props;
+    const { locale = {}, version, functionMode, authEnabled } = this.props;
     const MenuData = getMenuData(functionMode);
     return (
       <section
@@ -146,7 +150,12 @@ class MainLayout extends React.Component {
                 )}
               </div>
             </div>
-            <div className="right-panel next-shell-sub-main">{this.props.children}</div>
+            <div className="right-panel next-shell-sub-main">
+              {authEnabled === 'false' ? (
+                <Message type="notice">{this.props.notice}</Message>
+              ) : null}
+              {this.props.children}
+            </div>
           </div>
         </section>
       </section>

console-ui/src/reducers/base.js

@@ -15,12 +15,15 @@
  */
 
 import request from '../utils/request';
-import { GET_STATE } from '../constants';
+import { GET_STATE, LOGINPAGE_ENABLED, GET_NOTICE } from '../constants';
 
 const initialState = {
   version: null,
   standaloneMode: '',
   functionMode: '',
+  loginPageEnabled: '',
+  authEnabled: '',
+  notice: '',
 };
 
 /**
@@ -33,21 +36,47 @@ const getState = () => dispatch =>
   request
     .get('v1/console/server/state')
     .then(res => {
+      localStorage.setItem(LOGINPAGE_ENABLED, res.login_page_enabled);
       dispatch({
         type: GET_STATE,
         data: {
           version: res.version,
           standaloneMode: res.standalone_mode,
           functionMode: res.function_mode,
+          loginPageEnabled: res.login_page_enabled,
+          authEnabled: res.auth_enabled,
         },
       });
     })
     .catch(() => {
+      localStorage.setItem(LOGINPAGE_ENABLED, null);
       dispatch({
         type: GET_STATE,
         data: {
           version: null,
           functionMode: null,
+          loginPageEnabled: null,
+          authEnabled: null,
+        },
+      });
+    });
+
+const getNotice = () => dispatch =>
+  request
+    .get('v1/console/server/announcement')
+    .then(res => {
+      dispatch({
+        type: GET_NOTICE,
+        data: {
+          notice: res.data,
+        },
+      });
+    })
+    .catch(() => {
+      dispatch({
+        type: GET_NOTICE,
+        data: {
+          notice: '',
         },
       });
     });
@@ -56,9 +85,11 @@ export default (state = initialState, action) => {
   switch (action.type) {
     case GET_STATE:
       return { ...state, ...action.data };
+    case GET_NOTICE:
+      return { ...state, ...action.data };
     default:
       return state;
   }
 };
 
-export { getState, login };
+export { getState, login, getNotice };

console-ui/src/utils/request.js

@@ -39,7 +39,7 @@ const request = () => {
       if (!params) {
         config.params = {};
       }
-      if (!url.includes('auth/users/login')) {
+      if (!url.includes('auth/users/login') && localStorage.token) {
         let token = {};
         try {
           token = JSON.parse(localStorage.token);