Naughty Program Manipulator

    @uiw-admin/user-login
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.19 • Public • Published

    登录页面

    npm version

    简化项目登录页面,为了多项目登录页面不用重新构建登录页面

    何时使用

    在不重新构建登录页面的时候使用

    安装

    npm i @uiw-admin/user-login --save  # yarn add  @uiw-admin/user-login

    基本使用

    api:登录请求接口,onSuccess:登陆成功后回调

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { Notify } from "uiw"
    const UserLayout = () => {
      return (
        <UserLogin
          api="/api/login"
          onSuccess={(data) => {
            if (data && data.token) {
              sessionStorage.setItem("token", data.token)
              sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
            } else {
             Notify.error({ title: "错误通知", description: data.message || "请求失败" })
            }
          }}
        />
      )
    }
    ReactDOM.render(<UserLayout />, _mount_);

    添加额外请求参数

    onBefore:登陆前回调,用于添加额外请求参数。如果返回 false, 则不进行登录请求操作

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { Notify } from "uiw"
    const UserLayout = () => {
      return <UserLogin
        api="/api/login"
        onBefore={(value) => ({ a: 12, b: 1221 })}
        // onBefore={(value) => false}
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    ReactDOM.render(<UserLayout />, _mount_);

    配置接口参数

    saveField:配置登陆参数字段,⚠️ 注意:V6版本中删除当前属性。建议使用defaultFieldsConfig属性

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    const UserLayout = () => {
      return <UserLogin
        api="/api/login"
        // 配置登陆参数
        saveField={{
          userName: "username",
          passWord: "password"
        }}
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    ReactDOM.render(<UserLayout />, _mount_);

    默认输入框属性配置

    defaultFieldsConfig:默认输入框属性配置

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    const UserLayout = () => {
      return <UserLogin
        api="/api/login"
        defaultFieldsConfig={{
          userName:{label:"手机号",name:"phone"},
          passWord:{label:"密码"},
        }}
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    ReactDOM.render(<UserLayout />, _mount_);

    默认登录按钮属性配置

    btnProps:默认登录按钮属性配置,自定义的按钮不生效

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
        api="/api/login"
        btnProps={{ type: "primary" }}
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    自定义form表单项

    fields:可进行自定义form表单项

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
       fields={[
          {
            name: "email",
            label: "邮箱",
            labelFor: 'email',
            children: (
              <input
                id={"email"}
                type="email"
                placeholder={`请输入邮箱`}
                className="form-field"
              />
            ),
          }
         ]}
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    是否需要默认的输入框渲染

    isDefaultFields:是否需要默认的输入框渲染

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
       fields={[
          {
            name: "email",
            label: "邮箱",
            labelFor: 'email',
            children: (
              <input
                id={"email"}
                type="email"
                placeholder={`请输入邮箱`}
                className="form-field"
              />
            ),
          }
         ]}
        isDefaultFields={false}
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    使用配置渲染操作按钮

    buttons:可进行自定义按钮配置,从而做更多业务拓展(如注册等)

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
       buttons={[
           {
             title: "登录",
             htmlType: "submit",
           },
           {
             title: "注册",
           },
         ]}
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    自定义背景样式

    styleContainer:自定义背景样式 ,bg:可直接修改背景图片

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
        styleContainer={{
          background:"url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile05.16sucai.com%2F2015%2F0615%2F0f9320e353671b9b02049dec80a7fde3.jpg&refer=http%3A%2F%2Ffile05.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648782265&t=8e140f1c56df1f31366698c0d695f36f)",
        }}
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    自定义背景图片

    bg:可直接修改背景图片,⚠️ 注意:V6版本中删除当前属性。建议使用styleContainer

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
          bg="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1-lanrentuku.qqxzb-img.com%2F2020%2F11%2F11%2Fef6f5575-ee2f-4113-b471-b8f0becf98c3.jpg%3FimageView2%2F2%2Fw%2F1024&refer=http%3A%2F%2Fi-1-lanrentuku.qqxzb-img.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648782888&t=33ace74f48bd36f363b577158171abd1"
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    自定义项目名称

    projectName:自定义项目名称

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    
    const UserLayout = () => {
      return <UserLogin
        projectName="项目名称"
        api="/api/login"
        onSuccess={(data) => {
          if (data && data.token) {
            sessionStorage.setItem("token", data.token)
            sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
          } else {
            Notify.error({ title: "错误通知", description: data.message || "请求失败" })
          }
        }}
      />
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    重写登录框渲染

    children:登录框进行重写

    import React from 'react';
    import UserLogin from '@uiw-admin/user-login';
    import { useNavigate, } from 'react-router-dom';
    import { Notify } from "uiw"
    import { Form, Row, Col,Button } from 'uiw';
    const UserLayout = () => {
      return <UserLogin>
      <Form
          resetOnSubmit={false}
          onSubmit={({ current }) => {
            const errorObj = {};
            if (!current.username) errorObj.username = `账号不能为空!`;
            if (!current.password) errorObj.password = `密码不能为空!`;
            if (Object.keys(errorObj).length > 0) {
              const err = new Error();
              err.filed = errorObj;
              throw err;
            } else {
              setStore({ ...current});
            }
          }}
          onSubmitError={(error) => {
            if (error.filed) {
              return { ...error.filed };
            }
            return null;
          }}
          fields={{
            username: {
              label: `账号`,
              labelFor: 'username',
              children: (
                <input
                  type="text"
                  id="username"
                  placeholder={`请输入账号`}
                  className="form-field"
                />
              ),
            },
            password: {
              label: `密码`,
              labelFor: 'password',
              children: (
                <input
                  id="password"
                  type="password"
                  placeholder={`请输入密码`}
                  className="form-field"
                />
              ),
            },
          }}
        >
          {({ fields, canSubmit}) => {
            return (
              <div>
                <Row>
                  <Col style={{ color: '#555' }}>{fields.username}</Col>
                </Row>
                <Row>
                  <Col style={{ color: '#555' }}>{fields.password}</Col>
                </Row>
                <Row>
                    <Button
                      disabled={!canSubmit()}
                      className="btns"
                      block
                      style={{ marginTop: 20 }}
                      htmlType="submit"
                      type="dark"
                    >
                      登录
                    </Button>
                </Row>
              </div>
            );
          }}
        </Form>
      
      </UserLogin>
    }
    // export default UserLayout;
    ReactDOM.render(<UserLayout />, _mount_);

    参数说明

    参数 必填 类型 默认值 说明
    api string 请求接口
    align 枚举类型:'left' | 'right' | 'center' center 卡片框的位置
    footer React.ReactNode true 页脚
    bg string 页面背景图,可以require('./image.png')或者是图片链接
    logo string |'' logo头像, 值为null 不显示logo
    children React.ReactNode 替换卡片位置内容
    projectName string|null UIW Admin 项目名称(页面标题) 如果值为null 不显示标题
    btnProps Omit<ButtonProps, 'ref'> {} 登录按钮 属性
    buttons (Omit<ButtonProps, 'ref'> & { title?: React.ReactNode })[] 登录按钮位置的自定义按钮组, title 为显示标题
    onSuccess (resp: any, form: (FormValue | undefined)) => void ()=>null 登录接口返回
    onBefore (store: FormValue) => (Record<string, any> | boolean) 用接口之前 , 可以通过这个添加额外参数 返回 false 则不进行登录操作
    requestConfig Options request 请求 options 配置参数
    saveField {userName(登录账号字段)?:string,passWord(密码字段)?:string} {userName:"username",passWord:"password"} 默认输入框保存字段
    defaultFieldsConfig {userName(账户输入框)?:Partial<FieldsProps>,passWord(密码输入框)?:Partial<FieldsProps>} 默认输入框保存字段
    fields FieldsProps[] 自定义form表单项
    isDefaultFields boolean true 是否需要默认的输入框渲染
    classNameWarp string 卡片框外层className
    styleWarp React.CSSProperties 卡片框外层style
    classNameBody string 卡片框className
    styleBody React.CSSProperties 卡片框style
    styleContainer React.CSSProperties 背景框style 可再次调整背景图样式
    export interface FieldsProps<T = any> extends FormFieldsProps<T> {
      /** 保存字段 */ 
      name: string;
      // 验证输入框值   value:输入框的值,current:当前表单的值,返回值为 string 类型时,进行报错提示
      verification?: (value: any, current: Record<string, any>) => string | boolean | null,
    }

    贡献者

    感谢所有的贡献者,欢迎开发者为开源项目贡献力量。

    License

    Licensed under the MIT License.

    Install

    npm i @uiw-admin/user-login

    DownloadsWeekly Downloads

    229

    Version

    5.3.19

    License

    MIT

    Unpacked Size

    1.78 MB

    Total Files

    18

    Last publish

    Collaborators

    • wcjiang