react 高效高質量搭建後臺系統 系列 —— 登入

彭加李發表於2023-01-13

其他章節請看:

react 高效高質量搭建後臺系統 系列

登入

本篇將完成登入模組。效果和 spug 相同:

需求如下:

  • 登入頁的繪製
  • 支援普通登入和LDAP登入
  • 登入成功後跳轉到主頁,沒有登入的情況下訪問系統會重定向到登入頁,登入成功後再次回到之前的頁面。系統會話過期後,請求會重定向到登入頁。

Tip退出登入在進入系統後進行,暫不不管。

路由和登入

登入頁是進入系統的門戶,登入頁繪製邏輯比較簡單(單個模組的開發比較簡單)。

首先要解決:根據 url 不同,進入登入頁還是系統主頁。這裡需要使用路由器。

spug 中的路由和登入

詳情請看 react 路由react 路由原理

Tip:實現的核心是 Router,以及 history 包。

需求:瀏覽器輸入 /(http://localhost:3010/) 進入登入頁,其他路徑進入系統。

實現如下:

  • 在入口頁(index.js)中使用 <Router history={history}> 管理路由:
// spug\src\index.js
import { history, updatePermissions } from 'libs';
// 許可權、token 相關
updatePermissions();

ReactDOM.render(
  // Router 是路由器,用於管理路由
  // `history: object` 用來導航的 history 物件。
  <Router history={history}>
    <ConfigProvider locale={zhCN} getPopupContainer={() => document.fullscreenElement || document.body}>
      <App/>
    </ConfigProvider>
  </Router>,
  document.getElementById('root')
);

其中 history 用於導航 history 物件(此用法在路由官網中)。執行 history.push 時不僅會改變瀏覽器的 url,而且路由也會發生變化(請看本篇“history={history} 的作用”章節)

  • libs 模組程式碼如下:
// spug\src\libs\index.js
import _http from './http';
// 僅對 history 包的匯出
import _history from './history';

// 裡面有 updatePermissions
export * from './functools';
export * from './router';
export const http = _http;
export const history = _history;
export const VERSION = 'v3.0.5';

history 僅對 history 包的匯出,在 這裡 中已介紹。

  • 主頁(App.js)中定義了兩個路由,如果 url 精確匹配 / 則進入登入頁,否則進入系統( Layout 是 antd 中的 Layout 元件,對 404 的介面反饋也 Layout 模組中進行了處理)。
// spug\src\App.js

class App extends Component {
    render() {
        return (
        // 只渲染其中一個 Route
        // exact 精確匹配
        // component={Login} 路由元件(不同於一般元件,其 props 中有路由相關方法。)
        <Switch>
            <Route path="/" exact component={Login} />
            {/* 沒有匹配則進入 Layout */}
            <Route component={Layout} />
        </Switch>
        );
    }
}

export default App;

myspug 新增路由和登入

  • 入口頁增加 <Router history={history}>

Tip: StrictMode(一個用來突出顯示應用程式中潛在問題的工具。與 Fragment 一樣) 仍舊保留。

// myspug\src\index.js
 import React from 'react';
+import { Router } from 'react-router-dom';
+import { history } from '@/libs';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+  // StrictMode 是一個用來突出顯示應用程式中潛在問題的工具。與 Fragment 一樣,StrictMode 不會渲染任何可見的 UI。它為其後代元素觸發額外的檢查和警告。
+  // 嚴格模式檢查僅在開發模式下執行;它們不會影響生產構建。
   <React.StrictMode>
-    <ConfigProvider locale={zhCN}>
-      <App />
-    </ConfigProvider>
+    <Router history={history}>
+      <ConfigProvider locale={zhCN}>
+        <App />
+      </ConfigProvider>
+    </Router>

   </React.StrictMode>
 );
  • 新建 libs/index.js,主要是匯出 history:
// myspug\src\libs\index.js
import _http from './http';
import _history from './history';

export const http = _http;
export const history = _history;
export const VERSION = 'v1.0.0';
  • 在主頁中配置好 Switch,如果 url 是 / 則進入登入頁,如果是其他 url 則進入 HelloWorld(用來模擬 Layout)
// myspug\src\App.js

import { Component } from 'react';
// 登入元件
import Login from './pages/login';
// 模擬 Layout 元件
import HelloWorld from './HelloWord'
import { Switch, Route } from 'react-router-dom';

// 定義一個類元件
class App extends Component {
  render() {
    return (
      // 只渲染其中一個 Route
      // exact 精確匹配
      // component={Login} 路由元件(不同於一般元件,其 props 中有路由相關方法。)
      <Switch>
        <Route path="/" exact component={Login} />
        {/* 沒有匹配則進入 Layout */}
        <Route component={HelloWorld} />
      </Switch>
    );
  }
}

export default App;
  • 登入頁和 HelloWorld 都是最簡單的元件。程式碼如下:
// myspug\src\pages\login\index.js
export default function() {
    return <div>登入頁</div>
}
// myspug\src\HelloWord.js
export default function HelloWorld() {
    return <div>hello world!</div>
}

測試結果如下:

瀏覽器:http://localhost:3000/
顯示:  登入頁

瀏覽器:http://localhost:3000/home
顯示:  hello world!

history={history} 的作用

請求資料 一文中我們曾有一個疑惑:spug 官網中執行 history.push 不僅可以切換url,而且路由也發生了變化。

筆者測試發現:是入口頁 <Router history={history}> 中 history 的功勞。

驗證步驟如下:

  • 將 history 匯出到 window(例如在 http.js 中進行):
// myspug\src\libs\http.js

import http from 'axios'
import history from './history'
// 將其匯出
window._history = history;
  • 瀏覽器訪問 http://localhost:3000/ 並在控制檯中輸入:
執行:_history.push('/home')
url 變成 http://localhost:3000/home 瀏覽器顯示:hello world!

執行:_history.push('/')
url 變成 http://localhost:3000/     瀏覽器顯示:登入頁

Tip:如果刪除入口頁的 history={history},瀏覽器控制檯將報錯如下,提示沒有 location 屬性,無法進行路由匹配:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.

Uncaught TypeError: Cannot read property 'location' of undefined

spug 中登入模組的分析

我們初步解決了登入頁和主頁(或系統)之間的跳轉(或路由)。

下面我們完整分析 spug 中登入模組的實現,比如登入繪製、普通登入和LDAP登入...

登入模組程式碼都在 spug/src/pages/login 目錄下,一個 js 檔案,一個樣式檔案:

Administrator@-WK-10 MINGW /e/spug/src/pages/login 
$ ls
bg.png  index.js  login.module.css

login.module.css 是登入模組的樣式檔案,前文 已分析過樣式,這裡不再冗餘。

登入的核心全在 index.js 中。

我們參照登入介面說一下 index.js 的結構:

  • 這是一個函式式的元件,返回的 div 包括兩部分:登入資訊輸入區、網站底部統一資訊區
  • Tabs 僅做樣式,預設顯示“普通登入”
  • 表單與 Tabs 是獨立的。表單使用 Form.useForm 建立表單資料域進行控制
  • 驗證碼預設是關閉的,筆者這裡將其開啟
  • useEffect、useState是函式式元件中生命週期和狀態的使用語法
  • 元件掛載後的一系列 store 的初始化用於對應模組的使用
  • 裡面的 setTimeout 用於重新獲取驗證碼倒數計時
// spug\src\pages\login\index.js

/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Tabs, Modal, message } from 'antd';
import { UserOutlined, LockOutlined, CopyrightOutlined, GithubOutlined, MailOutlined } from '@ant-design/icons';
import styles from './login.module.css';
import history from 'libs/history';
import { http, updatePermissions } from 'libs';
// store 是 mobx 中的狀態集中器。這裡是初始化 pages 下的 config、deploy、exec、host等模組中的某欄位
import envStore from 'pages/config/environment/store';
import appStore from 'pages/config/app/store';
import requestStore from 'pages/deploy/request/store';
import execStore from 'pages/exec/task/store';
import hostStore from 'pages/host/store';

// 函式元件
export default function () {
  // FormInstance 經 Form.useForm() 建立的 form 控制例項。FormInstance 有一系列方法,例如
  // 注:useForm 是 React Hooks 的實現,只能用於函式元件,class 元件請檢視下面的例子(https://ant.design/components/form-cn#components-form-demo-control-hooks)
  // Tip:我們推薦使用 Form.useForm 建立表單資料域進行控制。如果是在 class component 下,你也可以透過 ref 獲取資料域。(https://ant.design/components/form-cn#components-form-demo-control-ref)
  const [form] = Form.useForm();
  // 驗證碼倒數計時
  const [counter, setCounter] = useState(0);
  // 控制登入按鈕
  const [loading, setLoading] = useState(false);
  // 登入型別預設是 default
  const [loginType, setLoginType] = useState('default');
  // 驗證碼。預設關閉
  const [codeVisible, setCodeVisible] = useState(!false);
  const [codeLoading, setCodeLoading] = useState(false);

  // 元件掛載後執行。相當於 componentDidMount()
  useEffect(() => {
    envStore.records = [];
    appStore.records = [];
    requestStore.records = [];
    requestStore.deploys = [];
    hostStore.records = null;
    hostStore.groups = {};
    hostStore.treeData = [];
    execStore.hosts = [];
  }, [])

  // 相當於 componentDidMount() 和 componentDidUpdate()(counter 變化時會執行)
  // 定時器,重新獲取驗證碼倒數計時。
  useEffect(() => {
    setTimeout(() => {
      // 預設是 0,故不會執行。當設定有效值時會執行,例如 30
      if (counter > 0) {
        setCounter(counter - 1)
      }
    }, 1000)
  }, [counter])

  // 登入
  function handleSubmit() {
    // form 是 FormInstance。
    // getFieldsValue - 獲取一組欄位名對應的值,會按照對應結構返回
    const formData = form.getFieldsValue();
    // 如果顯示了“驗證碼”卻沒有輸入,提示
    if (codeVisible && !formData.captcha) return message.error('請輸入驗證碼');

    // 登入中...
    setLoading(true);
    // 設定登入型別:default 或 ldap
    formData['type'] = loginType;
    // formData2 {username: '1', password: '2', captcha: '3', type: 'default'}
    console.log('formData2', formData)
    http.post('/api/account/login/', formData)
      // 官網返回: {"data": {"id": 1, "access_token": "4b6f1a9b8d824908abb9613695de57f8", "nickname": "\u7ba1\u7406\u5458", "is_supper": true, "has_real_ip": true, "permissions": []}, "error": ""}
      .then(data => {
        // 某種處理邏輯
        if (data['required_mfa']) {
          setCodeVisible(true);
          setCounter(30);
          setLoading(false)
        // 使用者請求時沒有真實ip則安全警告
        } else if (!data['has_real_ip']) {
          Modal.warning({
            title: '安全警告',
            className: styles.tips,
            content: <div>
              未能獲取到訪問者的真實IP,無法提供基於請求來源IP的合法性驗證,詳細資訊請參考
              <a target="_blank"
                href="https://spug.cc/docs/practice/"
                rel="noopener noreferrer">官方文件</a>。
            </div>,
            onOk: () => doLogin(data)
          })
        } else {
          doLogin(data)
        }
      }, () => setLoading(false))
  }

  // 將登入返回的資料存入本地,並更新許可權和 token
  function doLogin(data) {
    // id
    localStorage.setItem('id', data['id']);
    // token
    localStorage.setItem('token', data['access_token']);
    // 暱稱
    localStorage.setItem('nickname', data['nickname']);
    // is_supper
    localStorage.setItem('is_supper', data['is_supper']);
    // 許可權
    localStorage.setItem('permissions', JSON.stringify(data['permissions']));

    // 許可權和 token 相關。
    updatePermissions();
    // 登入成功則進入系統主頁或未登入前訪問的頁面
    // 更具體就是:切換 Url。進入主頁或登入前的頁面(記錄在 from 中)
    // react透過history.location.state來攜帶引數
    // 例如 spug\src\libs\http.js 中的:history.push('/', {from: history.location})
    if (history.location.state && history.location.state['from']) {
      history.push(history.location.state['from'])
    } else {
      history.push('/home')
    }
  }

  // 獲取驗證碼
  function handleCaptcha() {
    // 請求中...
    setCodeLoading(true);
    const formData = form.getFieldsValue(['username', 'password']);
    formData['type'] = loginType;
    // formData {username: '1', password: '2', type: 'default'}
    console.log('formData', formData)
    http.post('/api/account/login/', formData)
      // 30 秒後獲得驗證碼
      .then(() => setCounter(30))
      .finally(() => setCodeLoading(false))
  }


  return (
    <div className={styles.container}>
      <div className={styles.formContainer}>
        {/* 僅做樣式,預設選中第一個 tabpane。沒有選項卡內容 */}
        <Tabs className={styles.tabs} onTabClick={v => setLoginType(v)}>
          <Tabs.TabPane tab="普通登入" key="default" />
          <Tabs.TabPane tab="LDAP登入" key="ldap" />
        </Tabs>
        {/* 使用 Form.useForm 建立表單資料域進行控制 */}
        <Form form={form}>
          <Form.Item name="username" className={styles.formItem}>
            <Input
              size="large"
              // 關閉自動完成的選項
              autoComplete="off"
              placeholder="請輸入賬戶"
              // 人頭像的 icon
              prefix={<UserOutlined className={styles.icon} />} />
          </Form.Item>
          <Form.Item name="password" className={styles.formItem}>
            <Input
              size="large"
              type="password"
              autoComplete="off"
              placeholder="請輸入密碼"
              // 按下回車的回撥。即提交
              onPressEnter={handleSubmit}
              // 鎖的icon
              prefix={<LockOutlined className={styles.icon} />} />
          </Form.Item>
          {/* 驗證碼。預設關閉 */}
          {/* 這裡展示了 Form.Item 巢狀用法 */}
          <Form.Item hidden={!codeVisible} name="captcha" className={styles.formItem}>
            <div style={{ display: 'flex' }}>
              <Form.Item noStyle name="captcha">
                <Input
                  size="large"
                  autoComplete="off"
                  placeholder="請輸入驗證碼"
                  prefix={<MailOutlined className={styles.icon} />} />
              </Form.Item>
              {counter > 0 ? (
                <Button disabled size="large" style={{ marginLeft: 8 }}>{counter} 秒後重新獲取</Button>
              ) : (
                <Button size="large" loading={codeLoading} style={{ marginLeft: 8 }}
                  onClick={handleCaptcha}>獲取驗證碼</Button>
              )}
            </div>
          </Form.Item>
        </Form>

        <Button
          // block 屬性將使按鈕適合其父寬度。
          block
          size="large"
          type="primary"
          className={styles.button}
          loading={loading}
          onClick={handleSubmit}>登入</Button>
      </div>
      {/* 網站底部統一資訊。這裡是`官網`、`github 地址`、`文件` */}
      <div className={styles.footerZone}>
        <div className={styles.linksZone}>
          <a className={styles.links} title="官網" href="https://spug.cc" target="_blank"
            rel="noopener noreferrer">官網</a>
          <a className={styles.links} title="Github" href="https://github.com/openspug/spug" target="_blank"
            rel="noopener noreferrer"><GithubOutlined /></a>
          <a title="文件" href="https://spug.cc/docs/about-spug/" target="_blank"
            rel="noopener noreferrer">文件</a>
        </div>
        <div style={{ color: '#fff' }}>Copyright <CopyrightOutlined /> {new Date().getFullYear()} By Spug</div>
      </div>
    </div>
  )
}

myspug 登入模組的實現

Tip:登入樣式(pages\login\login.module.css)僅僅是一些樣式,直接從 spug 複製即可

index.js

新建 pages\login\index.js 檔案,內容如下:

Tip: 與 spug 中 login\index.js 類似,微做如下調整:

  • 元件掛載後的一系列 store 的初始化,暫時不需要,刪除
  • 引用路徑的調整:libs/history 改成 @/libs/history
// myspug\src\pages\login\index.js
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Tabs, Modal, message } from 'antd';
import { UserOutlined, LockOutlined, CopyrightOutlined, GithubOutlined, MailOutlined } from '@ant-design/icons';
import styles from './login.module.css';
// 調整下引用路徑:libs/history 改成 @/libs/history
import history from '@/libs/history';
import { http, updatePermissions } from '@/libs';

// 函式元件
export default function () {
    // antd 官網:我們推薦使用 Form.useForm 建立表單資料域進行控制。如果是在 class component 下,你也可以透過 ref 獲取資料域。(https://ant.design/components/form-cn#components-form-demo-control-ref)
    // FormInstance 經 Form.useForm() 建立的 form 控制例項。FormInstance 有一系列方法,例如
    // 注:useForm 是 React Hooks 的實現,只能用於函式元件,class 元件請檢視下面的例子(https://ant.design/components/form-cn#components-form-demo-control-hooks)
    const [form] = Form.useForm();
    // 驗證碼倒數計時
    const [counter, setCounter] = useState(0);
    // 控制登入按鈕
    const [loading, setLoading] = useState(false);
    // 登入型別預設是 default
    const [loginType, setLoginType] = useState('default');
    // 驗證碼。預設關閉。筆者將其開啟
    const [codeVisible, setCodeVisible] = useState(!false);
    const [codeLoading, setCodeLoading] = useState(false);

    // 相當於 componentDidMount() 和 componentDidUpdate()(counter 變化時會執行)
    // 定時器,重新獲取驗證碼倒數計時。
    useEffect(() => {
        setTimeout(() => {
            // 預設是 0,故不會執行。當設定有效值時會執行,例如 30
            if (counter > 0) {
                setCounter(counter - 1)
            }
        }, 1000)
    }, [counter])

    // 登入
    function handleSubmit() {
        // getFieldsValue - 獲取一組欄位名對應的值,會按照對應結構返回
        // form 是 FormInstance。
        const formData = form.getFieldsValue();
        // 如果顯示了“驗證碼”卻沒有輸入,提示
        if (codeVisible && !formData.captcha) return message.error('請輸入驗證碼');

        // 登入中...
        setLoading(true);
        // 設定登入型別:default 或 ldap
        formData['type'] = loginType;

        // formData2 {username: '1', password: '2', captcha: '3', type: 'default'}
        console.log('formData2', formData)

        http.post('/api/account/login/', formData)
            // 官網返回: {"data": {"id": 1, "access_token": "4b6f1a9b8d824908abb9613695de57f8", "nickname": "\u7ba1\u7406\u5458", "is_supper": true, "has_real_ip": true, "permissions": []}, "error": ""}
            .then(data => {
                // 某種處理邏輯,我們可以去除這個分支
                if (data['required_mfa']) {
                    setCodeVisible(true);
                    setCounter(30);
                    setLoading(false)
                } else if (!data['has_real_ip']) { // 使用者請求時沒有真實ip則安全警告
                    Modal.warning({
                        title: '安全警告',
                        className: styles.tips,
                        content: <div>
                            未能獲取到訪問者的真實IP,無法提供基於請求來源IP的合法性驗證,詳細資訊請參考
                            <a target="_blank"
                                href="https://spug.cc/docs/practice/"
                                rel="noopener noreferrer">官方文件</a>。
                        </div>,
                        onOk: () => doLogin(data)
                    })
                } else {
                    doLogin(data)
                }
            }, () => setLoading(false))
    }

    // 將登入返回的資料存入本地,並更新許可權和 token
    function doLogin(data) {
        // id
        localStorage.setItem('id', data['id']);
        // token
        localStorage.setItem('token', data['access_token']);
        // 暱稱
        localStorage.setItem('nickname', data['nickname']);
        // is_supper
        localStorage.setItem('is_supper', data['is_supper']);
        // 許可權
        localStorage.setItem('permissions', JSON.stringify(data['permissions']));

        // 許可權和 token 相關。
        updatePermissions();
        // 登入成功則進入系統主頁或未登入前訪問的頁面
        // 更具體就是:切換 Url。進入主頁或登入前的頁面(記錄在 from 中)
        // react透過history.location.state來攜帶引數
        // 例如 spug\src\libs\http.js 中的:history.push('/', {from: history.location})
        if (history.location.state && history.location.state['from']) {
            history.push(history.location.state['from'])
        } else {
            history.push('/home')
        }
    }

    // 獲取驗證碼
    function handleCaptcha() {
        // 請求中...
        setCodeLoading(true);
        const formData = form.getFieldsValue(['username', 'password']);
        formData['type'] = loginType;
        // formData {username: '1', password: '2', type: 'default'}
        console.log('formData', formData)
        http.post('/api/account/login/', formData)
            // 30 秒後獲得驗證碼
            .then(() => setCounter(30))
            .finally(() => setCodeLoading(false))
    }

    return (
        <div className={styles.container}>
            <div className={styles.formContainer}>
                {/* 僅做樣式,預設選中第一個 tabpane。沒有選項卡內容 */}
                <Tabs className={styles.tabs} onTabClick={v => setLoginType(v)}>
                    <Tabs.TabPane tab="普通登入" key="default" />
                    <Tabs.TabPane tab="LDAP登入" key="ldap" />
                </Tabs>
                {/* 使用 Form.useForm 建立表單資料域進行控制 */}
                <Form form={form}>
                    <Form.Item name="username" className={styles.formItem}>
                        <Input
                            size="large"
                            // 關閉自動完成的選項
                            autoComplete="off"
                            placeholder="請輸入賬戶"
                            // 人頭像的 icon
                            prefix={<UserOutlined className={styles.icon} />} />
                    </Form.Item>
                    <Form.Item name="password" className={styles.formItem}>
                        <Input
                            size="large"
                            type="password"
                            autoComplete="off"
                            placeholder="請輸入密碼"
                            // 按下回車的回撥。即提交
                            onPressEnter={handleSubmit}
                            // 鎖的icon
                            prefix={<LockOutlined className={styles.icon} />} />
                    </Form.Item>
                    {/* 驗證碼。預設關閉 */}
                    {/* 這裡展示了 Form.Item 巢狀用法 */}
                    <Form.Item hidden={!codeVisible} name="captcha" className={styles.formItem}>
                        <div style={{ display: 'flex' }}>
                            <Form.Item noStyle name="captcha">
                                <Input
                                    size="large"
                                    autoComplete="off"
                                    placeholder="請輸入驗證碼"
                                    prefix={<MailOutlined className={styles.icon} />} />
                            </Form.Item>
                            {counter > 0 ? (
                                <Button disabled size="large" style={{ marginLeft: 8 }}>{counter} 秒後重新獲取</Button>
                            ) : (
                                <Button size="large" loading={codeLoading} style={{ marginLeft: 8 }}
                                    onClick={handleCaptcha}>獲取驗證碼</Button>
                            )}
                        </div>
                    </Form.Item>
                </Form>

                <Button
                    // block 屬性將使按鈕適合其父寬度。
                    block
                    size="large"
                    type="primary"
                    className={styles.button}
                    loading={loading}
                    onClick={handleSubmit}>登入</Button>
            </div>
            {/* 網站底部統一資訊。這裡是`官網`、`github 地址`、`文件` */}
            <div className={styles.footerZone}>
                <div className={styles.linksZone}>
                    <a className={styles.links} title="官網" href="https://spug.cc" target="_blank"
                        rel="noopener noreferrer">官網</a>
                    <a className={styles.links} title="Github" href="https://github.com/openspug/spug" target="_blank"
                        rel="noopener noreferrer"><GithubOutlined /></a>
                    <a title="文件" href="https://spug.cc/docs/about-spug/" target="_blank"
                        rel="noopener noreferrer">文件</a>
                </div>
                <div style={{ color: '#fff' }}>Copyright <CopyrightOutlined /> {new Date().getFullYear()} By Spug</div>
            </div>
        </div>
    )
}

updatePermissions

登入頁中引入了 updatePermissions(import { http, updatePermissions } from '@/libs';)。
Tip:updatePermissions 的作用用於更新 functools.js 模組中的 X_TOKEN(spug中沒有前端沒有清除 X_TOKEN) 和 Permission變數。

我們將 spug 中的相關程式碼弄過來。步驟如下:

  • 在 functools.js 增加 updatePermissions:
// myspug\src\libs\functools.js

+// 准許。許可權相關。模組私有
+let Permission = {
+    isReady: false,
+    isSuper: false,
+    permissions: []
+};
+

// 由 updatePermissions() 更新
export let X_TOKEN;
+
+
+// 被入口頁(src/index.js)和登入頁(src/pages/login/index.js)呼叫
+export function updatePermissions() {
+    // 讀取 localStorage 項
+    // 只在登入時設定:localStorage.setItem('token'
+    X_TOKEN = localStorage.getItem('token');
+    Permission.isReady = true;
+    Permission.isSuper = localStorage.getItem('is_supper') === 'true';
+    try {
+        Permission.permissions = JSON.parse(localStorage.getItem('permissions') || '[]');
+    } catch (e) {
+
+    }
+}
  • 在 libs/index.js 中將 functools.js 模組匯出:
// myspug\src\libs\index.js

// 匯出一切。注:沒有匯出預設值
export * from './functools';
  • 入口頁更新許可權:
// myspug\src\index.js

import React from 'react';
import { history, updatePermissions } from '@/libs';

const root = ReactDOM.createRoot(document.getElementById('root'));

+ // 許可權和 token 相關。
+ updatePermissions();

myspug 登入模組的驗證

驗證步驟如下:

  • 輸入 http://localhost:3000/ 進入登入頁

  • 在登入頁輸入登入資訊,登入成功進入主頁

  • 修改瀏覽器 url(http://localhost:3000/log)回車進入系統,控制檯執行 _history.push('/', { from: _history.location }) 模擬請求過期重置到登入頁,再次輸入登入資訊登入,回到原來頁面(log)

補充

myspug 登入bug

myspug 登入頁有一個小bug,Tabs 下沒有顯示哪個選中了。就像這樣:

發現是選中的進度條沒有動態設定寬度,width 一直為 0。懷疑是 myspug 中 antd-按需引入-css 有問題,但 antd 其他元件(例如分頁、form等)沒有問題,Tabs也僅發現這一個樣式問題,去除按需引入 css 也沒解決。

筆者暫時未深入,或許簡化環境,從頭開始可以找到問題

普通登入和 LDAP 登入

spug 前端這裡普通登入LDAP 登入是相同處理的,都是輸入使用者名稱和密碼。

只要公司給員工分配了 LDAP(可實現公司內部多系統的統一登入) 的使用者名稱和密碼,該員工則可直接使用 LDAP 方式登入系統,無需再重複註冊。

登入標識 token

spug 中輸入使用者名稱、密碼,登入成功後,後端返回資料中包含 token(即後端分配給使用者的一個登入標識),前端將其儲存在 localStorage 中,後續前端所有的請求都將會帶上這個標識(token),後端透過這個標識識別使用者否有許可權訪問該請求,如果 token 過期,則返回 401 告訴前端“會話過期,請重新登入”。

X_TOKEN 跨模組

spug 中有個模組(functools.js),定義了一個私有變數,匯出了兩個變數。

// myspug\src\libs\functools.js
let Permission = {
    isReady: false,
    ...
};

// 由 updatePermissions() 更新
export let X_TOKEN;

export function updatePermissions() {
    X_TOKEN = localStorage.getItem('token');
    Permission.isReady = true;
    
}

在登入模組中僅匯入 updatePermissions,登入成功後會執行該方法,會給 X_TOKEN 賦值。而在其他模組(例如 http.js)僅匯入 X_TOKEN,這時 X_TOKEN 就會有值。

筆者測試如下:

  • 在 HelloWord.js 中引入 X_TOKEN:
// myspug\src\HelloWord.js

import { X_TOKEN } from "./libs/functools"

export default function HelloWorld() {
    return <div>hello world!。token = {X_TOKEN}</div>
}
  • 登入成功後,頁面會顯示 hello world!。token = xxxxxxxx...

其他章節請看:

react 高效高質量搭建後臺系統 系列

相關文章