logout done

console/src/main/java/com/alibaba/nacos/WebSecurityConfig.java

@@ -63,8 +63,9 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
                 // since we use jwt, session is not necessary
                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                 .authorizeRequests()
+                // TODO: we should use a better way to match the resources
                 // requests for resource and auth api are always allowed
-                .antMatchers("/", "/*.html", "/favicon.ico", "/**/*.html").permitAll()
+                .antMatchers("/", "/*.html", "/**/*.js", "/**/*.css", "/favicon.ico", "/**/*.html", "/**/*.svg", "/console-fe/public/*", "/**/*.png", "/*.png").permitAll()
                 .antMatchers("/v1/cs/health").permitAll()
                 .antMatchers("/v1/auth/**").permitAll()
                 .anyRequest().authenticated();

console/src/main/resources/static/console-fe/build/webpack.dev.conf.js

@@ -26,7 +26,7 @@ module.exports = Object.assign({}, base, {
       context: ['/'],
       changeOrigin: true,
       secure: false,
-      target: 'http://console.nacos.io',
+      target: 'http://localhost:8848',
       pathRewrite: {'^/v1' : '/nacos/v1'}
     }],
     disableHostCheck: true,

console/src/main/resources/static/console-fe/src/globalLib.js

@@ -613,7 +613,10 @@ const request = (function(_global) {
         // 处理403 forbidden
         if (error && error.status === 403) {
           // 跳转至login页
-          window.location = '/#/login';
+          // TODO: 用 react-router 重写，改造成本比较高，这里先hack
+          const url = window.location.href;
+          const base_url = url.split('#')[0];
+          window.location = `${base_url}#/login`;
         }
       }
     );

console/src/main/resources/static/console-fe/src/layouts/Header.js

@@ -12,6 +12,7 @@
  */
 
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { ConfigProvider } from '@alifd/next';
 import siteConfig from '../config';
@@ -20,6 +21,7 @@ import { aliwareIntl } from '@/globalLib';
 
 import './index.scss';
 
+@withRouter
 @connect(
   state => ({ ...state.locale }),
   { changeLanguage }
@@ -37,8 +39,17 @@ class Header extends React.Component {
     window.location.reload();
   };
 
+  logout = () => {
+    window.localStorage.clear();
+    this.props.history.push('/login');
+  };
+
   render() {
-    const { locale = {}, language = 'en-us' } = this.props;
+    const {
+      locale = {},
+      language = 'en-us',
+      location: { pathname },
+    } = this.props;
     const { home, docs, blog, community, languageSwitchButton } = locale;
     const BASE_URL = `https://nacos.io/${language}/`;
     const NAV_MENU = [
@@ -74,6 +85,12 @@ class Header extends React.Component {
               title={siteConfig.name}
             />
           </a>
+          {/* if is login page, we will show logout */}
+          {pathname !== '/login' && (
+            <span className="logout" onClick={this.logout}>
+              退出
+            </span>
+          )}
           <span className="language-switch language-switch-primary" onClick={this.switchLang}>
             {languageSwitchButton}
           </span>

console/src/main/resources/static/console-fe/src/layouts/index.scss

@@ -98,6 +98,17 @@
   font-size: 14px;
   opacity: 0.6;
 }
+.header-container .header-body .logout {
+  float: right;
+  display: inline-block;
+  box-sizing: border-box;
+  margin-right: 40px;
+  text-align: center;
+  font-family: PingFangSC-Medium;
+  color: white;
+  font-size: 14px;
+  opacity: 0.6;
+}
 .header-container .header-body .language-switch:hover {
   opacity: 1;
 }

console/src/main/resources/static/console-fe/src/pages/Login/Login.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, Form, Input, Message } from '@alifd/next';
+import { withRouter } from 'react-router-dom';
 
 import './index.scss';
 import Header from '../../layouts/Header';
@@ -7,6 +8,7 @@ import { request } from '../../globalLib';
 
 const FormItem = Form.Item;
 
+@withRouter
 class Login extends React.Component {
   handleSubmit = values => {
     request({
@@ -19,7 +21,7 @@ class Login extends React.Component {
           // TODO: 封装一个方法存储、读取token
           localStorage.setItem('token', data);
           // TODO: 使用react router
-          window.location = '/#/';
+          this.props.history.push('/');
         }
       },
       error: () => {
@@ -37,12 +39,12 @@ class Login extends React.Component {
         <section
           className="top-section"
           style={{
-            background: 'url(/img/black_dot.png) repeat',
+            background: 'url(img/black_dot.png) repeat',
             backgroundSize: '14px 14px',
           }}
         >
           <div className="vertical-middle product-area">
-            <img className="product-logo" src="/img/nacos.png" />
+            <img className="product-logo" src="img/nacos.png" />
             <p className="product-desc">
               an easy-to-use dynamic service discovery, configuration and service management
               platform for building cloud native applications