第二章 openblock-gui实现用户登录1(切换登录与未登录状态)

前言

接下来几章将带大家实现实现用户登录。这里要求大家必须掌握redux与react-redux，否则你将看到云里雾里，考虑到部分人可能没有学习过React、redux与react-redux，这里建议这部分人先别往下，前去bilibili学习下React相关知识：尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授），学完再继续。

代码编写

创建一个user-state的reducer，在src->reducers文件夹下新建user-state.js，代码如下：

//初始化字符串的
import keyMirror from 'keymirror'

//定义用户登录状态
const UserState = keyMirror({
    //未登录状态
    NOT_LOGINED: null,
    //已登录状态
    LOGINED: null
})

const UserStateOB = Object.keys(UserState)

//初始化用户状态
const initState = {
    error: null,
    userData: null,
    loginState: UserState.NOT_LOGINED
}

//获取用户登录状态
const getLoginState = loginState => loginState === UserState.LOGINED

//定义一个reducer
const reducer = function(state=initState, action) {
    //暂时未实现任何操作，返回state就行
    return state
}

//将所写的全部暴露出去
export {
    reducer as default,
    initState as userStateInitState,
    UserState,
    UserStateOB,
    getLoginState
}

reducers/gui.js作为这个项目所有信息初始化的地方，因此我们定义的user-state也要在此做初始化，这里省略已有的项目代码，用…表示

//引入刚才暴露的reducer与初始化方法
import userStateReducer,{userStateInitState} from './user-state'


//将userStateInitState加入到guiInitialState
const guiInitialState = {
...
userState: userStateInitState,
...
}


//将userStateReducer加入到guiReducer
const guiReducer = combineReducers({
...
userState: userStateReducer,
...
})

接下来container / gui.jsx中为里面定义的GUI添加loginState这个属性，用于标识用户是否登录：

GUI.propTypes = {
...
loginState: PropTypes.bool,
...
}

既然定义了loginState这样的一个属性，那么它从哪里获取到的值？是不是来自于user-state.js中getLoginState中检测当前的loginState，因此要在mapStateToProps内加入

import {getLoginState} from '../reducers/user-state'


const mapStateToProps = state => {
  const loginState = state.scratchGui.userState.loginState;
  return {
    ...
	loginState: getLoginState(loginState),
	...
  }
}

根据天禹老师所讲的在容器组件中的state可以通过props传给UI组件，因此接下来我们要去components / gui / gui.jsx新增loginState，并将其传递进menu-bar

//在GUIComponent添加loginState
const GUIComponent = props => {
  const {
        ...
        loginState,
        ...
        
        ...componentProps
    } = omit(props, 'dispatch');
}

//并且我们也要在用到menu-bar的地方添加 241行左右
<MenuBar
  ...
  loginState={loginState}
  ...
/>

然后修改components / menu-bar.jsx中的MenuBar组件的显示，将右上角替加上我们的登录功能：

// 大概在829行加入如下代码
//有个isScratchDesktop() ?之前加就好
<React.Fragment>
     {this.props.loginState ? (
         <React.Fragment>
             <MenuBarItemTooltip
                 id="account-nav"
                 place={this.props.isRtl ? 'right' : 'left'}
             >
                 <div
                     className={classNames(
                         styles.menuBarItem,
                         styles.hoverable,
                         styles.accountNavMenu
                     )}
                 >
                     <img
                         className={styles.profileIcon}
                         src={profileIcon}
                     />
                     <span>
                         {'小白wwj'}
                     </span>
                     <img
                         className={styles.dropdownCaretIcon}
                         src={dropdownCaret}
                     />
                 </div>
             </MenuBarItemTooltip>
         </React.Fragment>
     ) : <button >登录</button>}
 </React.Fragment>

这时候来看看效果，未登录时

修改user-state.js的loginState: UserState.LOGINED看看已登录时

到这就已经能手动切换两种状态了，但是登录按钮有点low，所以让我们改一改吧，就在menu-bar目录下新建login-button.jsx以及login-button.css

// login-button.css
.login-button {
    /* 这里颜色查看colors里的$data-primary与主题色保持一致 */
    background: #FF8C1A;
}

// login-button.jsx
import classNames from 'classnames'
import {FormattedMessage} from 'react-intl'
import PropTypes from 'prop-types'
import React from 'react'
import Button from '../button/button.jsx'
import style from './login-button.css'

//这里你定义函数组件或者类组件都行
const LoginButton = ({
    className,
    onClick
}) => (
    <Button
      className={classNames(
          className,
          //这里loginButton不是乱写的css内采用.login-button那么这里必须login小写B大写
          style.loginButton
      )}

      onClick={onClick}
    >
        <FormattedMessage
            defaultMessage="LoginButton"
            description="Lable for login"
            id='gui.menuBar.loginButton'
        />

    </Button>
)

//约束参数类型
LoginButton.propTypes = {
    className: PropTypes.string,
    onClick: PropTypes.func
}

LoginButton.defaultProps = {
    onClick: () => {}
}

//把写好的按钮暴露出去
export default LoginButton

在login-button.jsx内我们用到FormattedMessage，设置了id='gui.menuBar.loginButton’对吧，其实这里涉及了一个openblock的国际化的东西，这里由于篇幅关系我在下一章再讲。这里没做处理会报个错说找不到这个id，因为我们没添加这个id，这时候它按钮会显示defaultMessage里的内容影响不大，下一章我们加上就好。

我们接着往下写，来到menu-bar.jsx在我们刚才添加登录的地方将button换成我们写好的LoginButton

// 替换位置就是刚才我们使用<button></button>的地方
import LoginButton from './login-button.jsx'
<LoginButton className={styles.menuBarButton} />

接下来看看效果，效果和我们预测的一样，按钮内容显示了defaultMessage的内容。

到此这一章节的目标就实现了。下章再见。

上一章
第一章 openblock-gui定制化Logo
下一章
第三章 openblock-gui实现用户登录2(openblock国际化的openblock-l10n)