react+antd从头搭建管理台(二)登录

点击登录,表单传递username和password调用后端登录接口，后端接口返回是否登录成功并将token返回给前端，前端将token存在本地，访问列表页等都带上这个token，后端会把这个token存在redis里面，有效期12个小时，每次访问自动更新时效12小时

src下新建utils目录

utils目录下新建auth.js文件，存储用户授权信息

内容如下

//存储用户授权信息
export function getToken(){
    return localStorage.getItem("token")
}

export function setToken(token){
    localStorage.setItem("token",token)
}

export function isLogined(){
    if(localStorage.getItem("token")){
        return true
    }
    return false
}

export function clearToken(){
localStorage.removeItem("token")
}

所有页面都走APP.JS，所以在app.js做一个处理

import {isLogined} from './utils/auth'

function App(){

return (isLogined()?<Frame></Frame>:<Redirect to="/login"/>);

}

2、登录之后调接口

在Login.js修改

import {setToken} from '../utils/auth'

在登录提交的函数里面使用setToken

const onFinish = (values: any) => {
   setToken(values.username)
  
};

首页的退出按钮调用clearToken方法

关于前后端token的梳理见这篇文章及这张图

前后端Token验证_繁花落幕的博客-CSDN博客_前后端token验证

登录、退出（关于token）_Jason_996的博客-CSDN博客

 源码地址 

https://github.com/gogocomeon/stu-shop-manager