一、概述

本文将通过React Router & React Redux & Umi.js useModel实现登录和授权路由功能。

二、技术实现

auth-action-reducer (redux配置)

export const Login = (username, password) => 
        ({type: 'login',username: username,password: password };
export const Logout = (username) => 
        ({type: 'logout', username: username});

export const AuthReducer = (state, action) =>{
    switch(action.type){
        case 'Login':
            const res = auth(action.username, action.password);
            if (res){
                return {...state, loggined:true, username}
            }
            return state;
        case 'Logout':
            const res = unaut服务器托管网h(action.username);
            if (res){
                return {...state, loggined:false}
            }
            return state;
    }
}

export const AuthInitialState = {loggined: false};

src/models/authModel.ts

const [state, dispatch] = useReducer(AuthReducer,AuthInitialState);

exprot default function AuthModel(){
    return {
        state,
        dispatch
    }
}

auth-page.js (登录页)

export const AuthPage = () =>{
    const [state, dispatch] = useModel("userModel");
    
    return (
        

            
Login Page
             dispatch(Login())>Login
        
    );
    
};

welcome-page.js (首页)

 const Welcome = () =>{
    const [state, dispatch] = useModel("userModel")
    return (

                
Home Page
                {state.loggined
                    ? {dispatch(Logout())}>LogOut
                    :'请登录'}
            
);
}

app.js (入口，配置路由)

const App = () => {
    
    const [state] = userModel("userModel");

    return (
        

            

Home
            

Login
        

        
         服务器托管网   
                
                 {
                    state.isLoggined ? 
                    : }/>
            
        
    );
    
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 功能切片设计

功能切片设计是一种前端架构模式，用于构建前端应用程序。简单来说，它是组织代码的规则和约定的汇编。其主要目标是使项目在面对不断变化的业务需求时更加易于理解和结构化。如果您使用功能切片设计进行构建，您的应用程序将包含这三个组件 – 层、切片和段。 层：层在所有项目…