添加退出登录功能

back/api/auth.ts

@@ -10,7 +10,7 @@ const route = Router();
 export default (app: Router) => {
   app.use('/', route);
   route.post(
-    '/auth',
+    '/login',
     async (req: Request, res: Response, next: NextFunction) => {
       const logger: Logger = Container.get('logger');
       try {

back/loaders/express.ts

@@ -13,7 +13,7 @@ export default ({ app }: { app: Application }) => {
   app.use(bodyParser.urlencoded({ extended: true }));
   app.use(
     jwt({ secret: config.secret as string, algorithms: ['HS384'] }).unless({
-      path: ['/api/auth'],
+      path: ['/api/login'],
     }),
   );
   app.use(config.api.prefix, routes());

src/layouts/index.tsx

@@ -8,11 +8,16 @@ import {
 } from 'darkreader';
 import defaultProps from './defaultProps';
 import { Link, history } from 'umi';
+import { LogoutOutlined } from '@ant-design/icons';
 import config from '@/utils/config';
 import 'codemirror/mode/shell/shell.js';
 import './index.less';
 
 export default function (props: any) {
+  const logout = () => {
+    localStorage.removeItem(config.authKey);
+  };
+
   useEffect(() => {
     const isAuth = localStorage.getItem(config.authKey);
     if (!isAuth) {
@@ -55,6 +60,16 @@ export default function (props: any) {
         }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
+      postMenuData={(menuData) => {
+        return [
+          ...(menuData || []),
+          {
+            icon: <LogoutOutlined />,
+            name: '退出登录',
+            onTitleClick: () => logout(),
+          },
+        ];
+      }}
       {...defaultProps}
     >
       {props.children}

src/pages/login/index.tsx

@@ -11,7 +11,7 @@ const FormItem = Form.Item;
 const Login = () => {
   const handleOk = (values: any) => {
     request
-      .post(`${config.apiPrefix}auth`, {
+      .post(`${config.apiPrefix}login`, {
         data: {
           username: values.username,
           password: values.password,

src/pages/setting/index.tsx

@@ -9,6 +9,7 @@ import {
   auto as followSystemColorScheme,
   setFetchMethod,
 } from 'darkreader';
+import { history } from 'umi';
 
 const optionsWithDisabled = [
   { label: '亮色', value: 'light' },
@@ -34,9 +35,8 @@ const Password = () => {
         },
       })
       .then((data: any) => {
-        notification.success({
-          message: data.msg,
-        });
+        localStorage.removeItem(config.authKey);
+        history.push('/login');
       })
       .catch((error: any) => {
         console.log(error);