React开发学习- JWT用户认证与异步请求

Posted 2021-09-04 火腿肠烧烤大赛冠军

强弱类型的继承关系

如果A类型继承了B继承
那么如果要求类型A但是使用的是类型B那么也不会报错

js为鸭子类型：面向接口编程而不是面向对象编程（只校验格式）
所以说即使不是一个类型只要样子一样就不会报错

使用JSON-SERVER模仿不符合REST API接口的接口

创建middleware.js

module.exports = (req,res,next)=>{
    if(req.method === 'POST' && req.path ==='/login'){
        if(req.body.username === 'sunyifang' && req.body.password ==='123123'){
            return res.status(200).json({
                user:{
                    token:'123'
                }
            })
        }else{
            return res.status(400).json({message:'用户名或密码错误'});
        }
    }
}

更改JSON文件：

    "json-server": "json-server __json_server_mock__/db.json --watch --port 3001 --middlewares ./__json_server_mock__/middleware.js"

使用jira-dev-tool

npm下载：

npx imooc-jira-tool

在index.tsx中使用拦截函数：

import {loadDevTools} from 'jira-dev-tool';
//使用sever模仿数据
loadDevTools(()=>{
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
})

然后就可以在页面发现这个 小东西了

使用context来管理全局变量

import React, { ReactNode, useState } from "react";
import * as auth from "./../auth-provider";
import { User } from "./../screens/project-list/search-panel";


interface AuthForm {
  username: string;
  password: string;
}

const AuthContext = React.createContext<
| {
    user: User | null;
    register: (form: AuthForm) => Promise<void>;
    login: (form: AuthForm) => Promise<void>;
    logout: () => Promise<void>;
  }
| undefined
>(undefined);
AuthContext.displayName = "AuthContext";

export const AuthProvider = ({children}:{children:ReactNode}) => {
  const [user,setUser] = useState<User|null>(null)

  const login = (form:AuthForm)=> auth.login(form).then(setUser)
  const register = (form:AuthForm)=> auth.register(form).then(setUser)
  const logout = ()=> auth.logout().then(()=>setUser(null))

  return <AuthContext.Provider children={children} value={{user,login,register,logout}}/>
};

export const useAuth = () => {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth必须在AuthProvider中使用");
  }
  return context;
};

axios 与fech

fetch不会根据请求码抛出异常，而axios会
fetch只会在断网或网络连接失败时抛出异常

hook的使用条件

如果你的函数要用一个hook的时候 那么你的函数必须是一个hook

TS-utility type

用泛型给它传入一个其他类型，然后utility type对这个类型进行某种操作
用几个类型组成一个新的类型

// 类型别名、Utility Type 讲解
// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;
// TS2322: Type '{}' is not assignable to type 'string | number'.
// myFavoriteNumber = {}
let jackFavoriteNumber: string | number;

// 类型别名在很多情况下可以和interface互换
// interface Person {
//   name: string
// }
// type Person = { name: string }
// const xiaoMing: Person = {name: 'xiaoming'}

// 类型别名, interface 在这种情况下没法替代type
type FavoriteNumber = string | number;
let roseFavoriteNumber: FavoriteNumber = "6";

// interface 也没法实现Utility type
type Person = {
  name: string;
  age: number;
};
const xiaoMing: Partial<Person> = {};
const shenMiRen: Omit<Person, "name" | "age"> = {};
type PersonKeys = keyof Person;
type PersonOnlyName = Pick<Person, "name" | "age">;
type Age = Exclude<PersonKeys, "name">;

// Partial 的实现
type Partial<T> = {
  [P in keyof T]?: T[P];
};