React + UmiJS: 实现简单登录鉴权

在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录，只是通过postman进行了测试，本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面，简单测试登录，页面如下功能：

• 登入，访问后端api获取token以及权限信息
• 登入后实现跳转
• token信息和roles放入localStorage中
• 其他路由设置访问权限，通过wrappers进行权限判断
• 登出，擦除localStorage信息，跳转到login界面

技术栈：

大体就是蚂蚁金服的react架构哪些东西

• node 12.18.2
• yarn 1.22.4
• umi 3.x
• antd
• react 16

UmiJS简介

官网：https://umijs.org/zh-CN

蚂蚁金服开发的前段架构，antdpro就是使用的umi实现的，感兴趣可以看一下官方文档。

个人体验主要特色就是业务分层明显，集成dva，Redux， redux-saga， 等优秀组建，访问api等功能通过serveices层实现，内部redux通过models层实现，通过命名空间区分不同的store以及对应的函数及副作用，实现功能模块的纵向管理，路由统一管理，之前鉴权不是很方便，现在通过使用@umijs/plugin-access插件处理鉴权也很方便，而且大厂加持，可以安利一波

不过现在基本都是在用ts实现，看源码费点劲，不过自己写到时可以使用js，不过ts是趋势，只会js的同学是时候学习ts了。

实现

先看一下效果：

1. umi创建项目

推荐使用yarn管理依赖：

 npm i yarn tyarn -g

随便创建一个目录

mkdir myapp && cd myapp

创建一个项目，github上拉取一个base项目：

yarn create @umijs/umi-app

安装依赖：

yarn

到这里就创建好了一个基础umi框架的app

2. 编写login功能model

• login相关的功能，命名空间：login
• 因为获取的token和roles在localStorage中存储，因此不需要state
• 主要就是login和logout两个方法，一个用于登录，一个用于退出摖除数据
• 具体实现逻辑可以参考一下redux-saga

import {
    stringify } from 'querystring';
import {
    history } from 'umi';
import {
    accountLogin, getPageQuery } from '../services/login';

const Model = {
   
  namespace: 'login',   // 命名空间
  state: {
   },   // store 数据

  effects: {
       // 副作用 *的是异步方法
    *login({
    payload }, {
    call, put }) {
   
      const response = yield call(accountLogin, payload);

      if (response.code === 200) {
   
        yield put({
   
          type: 'changeLoginStatus',
          payload: response,
        });
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();

        let {