使用React和Redux Toolkit實(shí)現(xiàn)用戶登錄功能

更新時(shí)間：2023年05月10日 11:44:13 作者：Miketutu

在React中，用戶登錄功能是一個(gè)常見的需求，為了實(shí)現(xiàn)該功能，需要對(duì)用戶輸入的用戶名和密碼進(jìn)行驗(yàn)證，并將驗(yàn)證結(jié)果保存到應(yīng)用程序狀態(tài)中，在React中，可以使用Redux Toolkit來管理應(yīng)用程序狀態(tài)，從而實(shí)現(xiàn)用戶登錄功能，需要詳細(xì)了解可以參考下文

一、在utils創(chuàng)建loadable.tsx文件

這里是tsx文件，不是ts文件，因?yàn)閠s文件不識(shí)別jsx語(yǔ)法

因?yàn)閘oadable是異步加載，返回的是promise，所以需要對(duì)返回的promise進(jìn)行類型限制

import  Loadable  from "react-loadable.tsx";
const withLoadable = (component:()=>Promise<any>)=>{
        return Loadable({
            loader:component,
            loading:()=><div>加載中</div>,
        })
}
export default withLoadable

二、在router文件下創(chuàng)建routes.tsx

這里是tsx文件，不是ts文件，因?yàn)閠s文件不識(shí)別jsx語(yǔ)法

導(dǎo)入RouteObject
導(dǎo)入withLoadable.tsx文件
導(dǎo)入Login組件

    import {RouteObject} from 'react-router-dom'
    import withLoadable from 'withLoadable.tsx文件地址'
    const Login = withLoadable(()=>import('Login.tsx地址'))
    const routes:Array<RouteObject> = [
        {
            path:'/login'
            element:</Login>
        }
    ]

三、在index.tsx中配置

導(dǎo)入Browser

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

四、App.tsx文件配置

useRoutes是Hook組件

import {useRoutes} from 'react-router-dom'
import routes from 'routes地址'
import React from 'react';
function App() {
  return useRoutes(routes)
}
export default App;

axios二次封裝

導(dǎo)入

import axios,{InternalAxiosRequestConfig,AxiosResponse,AxiosError} from 'axios'
import {TOKEN_KEY} from '../utils/contant'
import {getToken,removeToken} from '../utils/h5Stroe'
import {message} from 'antd'
import {REQUESTURLERROR,TOKENVALDATE} from '../utils/contant'

響應(yīng)攔截器封裝：

導(dǎo)入axios的類型聲明：AxiosResponse

newAxios.interceptors.response.use((response:AxiosResponse)=>{
    return response
},(error:AxiosError)=>{
    if(error.response){
        switch(error.response.status){
            case 404:
                message.warning(REQUESTURLERROR)
                break;
            case 401:
                message.warning(TOKENVALDATE)
                removeToken(TOKEN_KEY)
                break
        }
    }
})

請(qǐng)求攔截器的封裝

導(dǎo)入axios的類型聲明：InternalAxiosRequestConfig

// 請(qǐng)求攔截器
newAxios.interceptors.request.use((req:InternalAxiosRequestConfig)=>{
        req.headers.Authorization =  getToken(TOKEN_KEY)
        return req
})

請(qǐng)求封裝

創(chuàng)建接口文件對(duì)請(qǐng)求參數(shù)進(jìn)行類型限制，下面有user.ts文件

export interface IUser{
    userName:string
    password:Number
}

封裝登錄請(qǐng)求

import request  from "../../utils/axiosApi";
import {IUser} from '../../types/users'
export default {
    login:(data:IUser)=>request.post('/users/login',data)
}

組件配置

import React from 'react'
import {Form,Button,Card,Input, message} from 'antd'
import { UserOutlined, LockOutlined} from '@ant-design/icons'
import $api from '../api/index'
import {IUser} from '../types/users'
import * as contant from '../utils/contant'
import {setToken} from '../utils/h5Stroe'
import {TOKEN_KEY} from '../utils/contant'
import {useNavigate} from 'react-router-dom'
export default function Login() {
  const nav = useNavigate()
  const loginApi = async(arg:IUser)=>{
      const result = await $api.user.login(arg)
      console.log(result);
        if(result.data.code){
          setToken(TOKEN_KEY,result.data.token)
          message.success(contant.LoginSuccess)
          nav('/')
        }
  }
  return (
    <div>
      <Card style={{width:'500px'}}>
        <Form onFinish={loginApi}>
          <Form.Item label='賬號(hào)' name='username' rules={[{ required:true, message:contant.USERNOTNULL}]}>
            <Input prefix={<UserOutlined></UserOutlined>} placeholder='請(qǐng)輸入用戶名'></Input>
          </Form.Item>
          <Form.Item label='密碼' name='password' rules={[{ required:true, message:contant.PASSWORDNOTNULL}]}>
            <Input prefix={<LockOutlined></LockOutlined>} placeholder='請(qǐng)輸入密碼'></Input>
          </Form.Item>
          <Form.Item>
            <Button type='primary' htmlType='submit'>登錄</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

到此這篇關(guān)于使用React和Redux Toolkit實(shí)現(xiàn)用戶登錄功能的文章就介紹到這了,更多相關(guān)React RTK實(shí)現(xiàn)登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: