Реагистрационная практика проекта (2) Миграция состояния страницы входа в систему

React.js
Реагистрационная практика проекта (2) Миграция состояния страницы входа в систему

ПредыдущийПрактика проекта React (1) из конфигурации фреймворка

На этот раз поговорим о дизайне страницы входа. В проектах, которые я писал ранее, я размещал форму на странице, не учитывая подсказку о загрузке в процессе ожидания пользователя. Перепланируйте на этот раз, отделите компоненты отображения от элементов управления и используйте конечный автомат для управления состоянием.

Анализ состояния

Я только что видел статью несколько дней назадДважды подумайте о внешнем управлении состоянием, я думаю, это очень интересно.Автор исходного текста использует идею конечного автомата для предварительного представления всех состояний и переходов состояний и элегантно управляет состоянием входа на страницу, чтобы избежать использования слишком большого количества переменных. . Эта статья относится к идеям и коду автора для реализации простой страницы входа. Анализ состояния выглядит следующим образом:

  • Начальная страница входа — это форма входа, которая отображает
  • Когда процесс данных отправлен (отправить), страница становится ожидающей состояния ответа данных (загрузка)
    • Ответ данных имеет два состояния: страница успеха переходит на домашнюю страницу, страница отказа выдает сообщение об ошибке
    • При успешном входе в систему только после выхода из системы (logout) вы сможете снова войти в систему
    • В случае сбоя входа повторите отправку (ОТПРАВИТЬ) Назад в состояние загрузки (Загрузка)
  • Вернуться к форме вохода после штата выхода

Это все еще эффект реализации имитации страницы входа в приложение Nuggets:

登录成功效果

определить конечный автомат

const machine = {
  states: {
    'login form': {
      submit: 'loading'
    },
    loading: {
      success: 'profile',
      failure: 'error'
    },
    profile: {
      viewProfile: 'profile',
      logout: 'login form'
    },
    error: {
      submit: 'loading'
    }
  }
}

Реализуйте функцию управления состоянием, которая возвращает следующее состояние

const stateTransformer = function(currentState, stepUp) {
  let nextState
  if (machine.states[currentState][stepUp]) {
    nextState = machine.states[currentState][stepUp]
  }
  console.log(`${currentState} + ${stepUp} --> ${nextState}`)
  return nextState || currentState
}

Мы храним переменные управления состоянием в redux и определяем простой модуль аутентификации следующим образом: чистая функция stateChanger используется для управления переходом состояния currentState, и переход состояния выполняется каждый раз, когда возвращается результат операции.

export default {
  namespace: 'auth',
  state: {
    currentState: 'login form'
  },
  reducers: {
    stateChanger(state, {stepUp}) {
      return {
        ...state,
        currentState: stateTransformer(state.currentState, stepUp)
      }
    }
  },
  effects: dispatch => ({
  async loginByPhoneNumber(playload, state) {
    dispatch.auth.stateChanger({stepUp: 'submit'})
    let {data} = await api.auth.loginByPhoneNumber(playload)
    if (data.s === 0) {
      dispatch.auth.stateChanger({stepUp: 'success'})
      saveData('juejin_token', data.token)
    } else {
      dispatch.auth.stateChanger({stepUp: 'failure'})
      Toast.info('用户名或密码错误', 2)
    }
  }
})
}

Затем в компоненте мы можем легко написать компонент, который контролирует изменения состояния.


  render() {
    let {currentState} = this.props
    return (
      <>
        {(() => {
          switch (currentState) {
            case 'loading':
              return (
                //加载中展示组件
              )
            case 'profile':
              return <Redirect to={'/'} />//返回首页
            default:
              return (
                //登录表单
              )
          }
        })()}
      </>
    )
  }

Дополнительная конфигурация

Чтобы сотрудничать с помощью входа в систему пользователя проекта, мы восстановим локальную службу и настройте переадресацию прокси-сервера маршрута в реакции. В частности, создайте новый файл SRC / SetupProxy.js в корневом каталоге, который будет/apiПеренаправить запрос на сервер в начале

const proxy = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(proxy('/api', {target: 'http://localhost:8989/', changeOrigin: true}))
}

services/api определяет интерфейс данных

export async function loginByPhoneNumber({phoneNumber, password}) {
  return post('/api/auth/type/phoneNumber', {
    body: {
      phoneNumber,
      password
    }
  })
}

Серверная часть реализует простую маршрутизацию промежуточного программного обеспечения.

const Koa = require('koa')
const router = require('./router')
router.post('/auth/type/phoneNumber', async (ctx, next) => {
  var {phoneNumber, password} = await parse.json(ctx.req)
  if (phoneNumber === '15111111111' && password === '123456') {
    let token = generateToken({uid: phoneNumber, password})
    ctx.response.body = JSON.stringify({
      s: 0,
      m: `账号登录成功错误`,
      d: '',
      token
    })
  } else {
    ctx.response.body = JSON.stringify({s: 1, m: '账号信息错误', d: ''})
  }
})

адрес проекта
Короче говоря, это небольшая личная практика. Есть ли у вас лучшие практики в управлении страницей входа? Какие еще осложнения необходимо учитывать

Категории