项目中使用umijs,实现登录鉴权功能

需求描述

进入某一个页面,如果鉴权失败,则跳转到登录页面进行登录,登录成功,返回之前的页面

实现方式

umijs官方文档,在 .umirc.js 自定义路由的时候,添加wrapper,实现鉴权拦截
然而折腾很久,还是没实现,于是用自己的方法实现

实现分析

  1. 首先写一个鉴权页面,鉴权成功加载页面,鉴权失败跳转登录页面,将这个页面包裹在项目的根组件外层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react'
import PropTypes from 'prop-types'
import { Redirect } from 'dva/router'
import Cookies from 'js-cookie'
const propTypes = {
children: PropTypes.array,
route: PropTypes.object
}
const AuthRouter = (props) => {
// 判断是否登录, 即是否有token
const isLogin = !!Cookies.get('token')
if (isLogin) {
// 删除跳转登录之前的页面
window.sessionStorage.removeItem('from_router')
return (<div className="auth-router">{ props.children }</div>)
} else {
// 保存跳转登录之前的页面
const hash = window.location.hash
const fromRouter = hash ? hash.slice(1) : ''
window.sessionStorage.setItem('from_router', fromRouter)
// 跳转登录页面
return (<Redirect to="/login" />)
}
}
AuthRouter.propTypes = propTypes
export default AuthRouter
  1. 登录页面,这个没啥说的,就是输入用户名密码,登录请求接口,返回token,配置好登录页面的路由

  2. 登录成功后,返回登录之前的页面,这里只写出核心功能

1
2
3
4
5
6
7
8
9
10
11
12
13
import router from 'umi/router'
import Cookies from 'js-cookie'

// 获取登录之前的页面
const fromRouter = window.sessionStorage.getItem('from_router') || '/'
// 拿到接口返回的token和expire
const token = 'token'
const time = 'expire'
const expires = new Date(time)
// 设置cookie和expires
Cookies.set('token', token, { expires })
// 返回登录之前的页面
router.replace(fromRouter)