后台管理员登录实现--系统篇

server/2024/10/23 16:59:00/

        我的小系统后台原来就有一个上传图片的功能还夹带个删除图片的功能，还嵌到了一个菜单里面。之前效果如下

        那么现在为了加大安全力度，想增加一个登录页面。通过登录再到这个页面。看着貌似很简单，但是听我细细说来，要新增些什么东西才能做到增加一个登录页面。

        可以先从前端代码入手，也可以从后端代码入手，这边先从前端代码入手，先做出个感性认知，效果如下

        这里选择用Form表单来实现，代码如下

<el-form :model="form" style="max-width: 600px" label-width="60px" label-position="left">
          <el-form-item label="用户名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>

        细看代码，总共摆放了2个输入框和对应的文字提示以及一个登录按钮。label部分宽度调到了60px，label-width="60px"。label位置调成左对齐，label-position="left"。密码输入框设置成密文模式type="password"

        然后要设置成差不多居中显示和弄一个开关来控制是否渲染这个登录页面，因为之前就说了还有另外一些页面要衔接起来。做法还可以由后端来提供路由控制，就是后端来提供登录页面的路由和登录后主体页面的路由。但是如果是这么做就有很多麻烦的事情，比如打包的时候要打包2份给后端，还要弄2个前端入口，调试不方便等等。

        <div v-if="exist.login_exist === false">
        <router-view></router-view>
    </div>
    <div class="container" v-else>

把上面的表单放到这里

    </div>

        exist.login_exist，这个就是页面开关，为false的时候就显示登录页面，登录成功后可以设置为true，至于差不多居中显示代码如下

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh; /* 使用视窗高度来使容器撑满整个屏幕 */
}

        #app的样式是默认的，我没改过，主要看.container样式

        接下来看看这个入口页面的逻辑实现，没改的话就是App.vue

const router = useRouter()

// do not use same name with ref
const form = reactive({
  name: '',
  password:'',
})

const exist = reactive({login_exist:true})

const onSubmit = () => {
  
  axios.post('http://admin.am8.com/anonym/login', {
      name: form.name,
      password: form.password
    })
    .then(function (response) {

      if (response.data.code === 1) {
          store.setToken(response.data.data)
          exist.login_exist = false
          router.push({path:'/sidebar'})
      } else {
          ElMessage.warning(response.data.msg)
      }
    })
    .catch(function (error) {
      console.log(error);
    });

}

        前面那3个定义分别是定义路由，定义form表单数据对象，定义页面开关

const router = useRouter()

// do not use same name with ref
const form = reactive({
  name: '',
  password:'',
})

const exist = reactive({login_exist:true})

        最后就是登录方法onSubmit的实现，向后端请求登录，注意看登录成功后做的事情

 if (response.data.code === 1) {
          store.setToken(response.data.data)
          exist.login_exist = false
          router.push({path:'/sidebar'})
      }

        存储登录令牌

store.setToken(response.data.data)

        页面开关设置为false

exist.login_exist = false

        跳转到/sidebar

router.push({path:'/sidebar'})

        看不懂/sidebar？那就先看看前端路由部分

import { createRouter, createWebHistory } from 'vue-router'
import Upload1 from './views/Upload1.vue'
import Sidebar from './views/menu/Sidebar.vue'
import App from './App.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
      { path: '/', component: App },
      { path: '/sidebar', component: Sidebar, children: [
          {
          
            path: '',
            component: Upload1,
          },
          {

            path: 'addImage',
            component: Upload1,
          },
        ], },
    ]
})
        看出来了吧，/sidebar是Sidebar.vue这个页面，Sidebar.vue页面仅仅是个我之前写的Menu菜单页面，Menu菜单里面的

        接下来看看后端的实现，数据库基于mysql5.7。先建立2张数据表，一张管理员表

CREATE TABLE `am8_admin` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `password` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8

        一张管理员登录令牌表

CREATE TABLE `am8_admin_token` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `admin_id` int(11) NOT NULL,
  `token` varchar(100) NOT NULL COMMENT '登录令牌',
  `client` tinyint(3) NOT NULL COMMENT '登录渠道。1.PC,2.H5',
  `create_time` int(11) NOT NULL COMMENT '首次登录时间戳',
  `update_time` int(11) NOT NULL COMMENT '最后一次登录时间戳',
  `ip` varchar(30) NOT NULL COMMENT '登录地址',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8

        后端框架基于thinkphp8，然后新建2个模型类，Admin和AdminToken。新建Anonym控制器，将BaseController复制一份到Admin应用下

        BaseController修改如下

protected function initialize()
    {
        $exist = AdminToken::where([
            'token' => request()->param('token'),
        ])->find();

        if ($exist !== null) {
            // 获取当前时间的时间戳
            $now = time();
            
            $timestamp = intval($exist->update_time);
            
            // 设定1小时的秒数
            $oneHourInSeconds = 3600;
            
            if (($now - $timestamp) > $oneHourInSeconds) {
                return myFailResponse(0, '登录状态已过期');
            }
        } else {
            return myFailResponse(0, '未登录');
        }
    }

        这里实现的是登录状态检查，后面所有需要登录才实现的功能都要继承这个类

        Anonym这个类里面实现了登录的接口，这个类就不用继承BaseController

public function login()
    {
        $admin = new Admin();
        
        $exist = $admin->where([
            'name' => request()->param('name'),
            'password' => $this->encrypt(request()->param('password')),
        ])->find();
        if ($exist !== null) {
            $result = $this->loginStateHandler($exist['id']);
            return mySuccessResponse($result);
        } else {
            return myFailResponse(1, '用户名或密码有误');
        }
        
    }

        encrypt这个是密码的加密方法，这里就不展示了，我也没想好怎么写，只是随手实现了加密。有的人想用hash就用hash，有的人想加盐就加盐，这里不展开了。

        loginStateHandler这个方法是对登录状态做处理。

private function loginStateHandler($id)
    {
        $exist = AdminToken::where([
            'admin_id' => $id,
            'client' => 1
        ])->find();
        
        // 获取当前时间的时间戳
        $now = time();
        
        if ($exist !== null) {
            $timestamp = intval($exist->update_time);
            
            // 设定1小时的秒数
            $oneHourInSeconds = 3600;
            
            if (($now - $timestamp) > $oneHourInSeconds) {
                $token = $this->createToken($id, $now);
                $exist->token = $token;
                $exist->ip = $this->getClientIp();
                $exist->save();
                
                return $token;
            } else {
                $exist->ip = $this->getClientIp();
                $exist->save();
                return $exist['token'];
            }
        } else {
            $admin_token = new AdminToken();
            $token = $this->createToken($id, $now);
            $admin_token->admin_id = $id;
            $admin_token->token = $token;
            $admin_token->client = 1;
            $admin_token->ip = $this->getClientIp();
            $admin_token->save();
            
            return $token;
        }
        
    }

        createToken方法是生成登录令牌的方法，这里就不展开了，因为我没想好，只是随手实现了一下，getClientIp这个是获取客户端ip的方法，也是没想好怎么写，不展开了，随手实现了一个。

        另外还要注意修改配置database.php，datetime_format的值改为false，避免取出时间戳时会被格式化从而导致登录逻辑出错

        既然后端已经支持登录验证，那么前面写的上传图片和删除图片的前端部分也要作出修改，提供相应支持，其实就是增加发送参数token，Upload1.vue文件修改如下

        <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="http://admin.am8.com/index/upload"
      :data="{token:store.token}"
      name="image"
      list-type="picture"
      :on-success="handleSuccess"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="3"
      :on-exceed="handleExceed"
    >

        上传组件增加:data，除了发送上传图片外，多发送个token。

const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
  if (response.code === 1) {
      fileList.value.pop()
      fileList.value.push(response.data)
  } else {
      if (response.code === 0) {
        fileList.value.pop()
          ElMessage.warning(response.msg)
      }
  }
  
}

        成功上传后，增加根据后端返回登录状态的提示

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {

  axios.post('http://admin.am8.com/index/deleteFile', {
      token: store.token,
      id: file.id,
    })
    .then(function (response) {
      if (response.data.code === 1) {
          
      } else {
          if (response.data.sub_code === 0) {
              router.push({path:'/'})
          }

      }
    })
    .catch(function (error) {
      console.log(error);
    });
}

        删除图片时也要增加发送token参数，还有登录状态不存在或者失效时跳转回登录页面，前后展示了2种失败后处理做法


http://www.ppmy.cn/server/134210.html

相关文章

Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目 本文介绍如何使用idea 2023.2.7构建基于SpringCloud alibaba微服务项目&#xff0c;基于Nacos注册中心。 环境准备&#xff1a; JDK版本&#xff1a;jdk17 SpringBoot:3.3.4 SpringCloud:2023.0.3 Nacos服务端:2.4.3 1、创建父工程&a…
阅读更多...
1971. 寻找图中是否存在路径

1971. 寻找图中是否存在路径

有一个具有 n 个顶点的 双向 图&#xff0c;其中每个顶点标记从 0 到 n - 1&#xff08;包含 0 和 n - 1&#xff09;。图中的边用一个二维整数数组 edges 表示&#xff0c;其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 vi 之间的双向边。 每个顶点对由 最多一条 边连接&#x…
阅读更多...
Unity/C#使用EPPlus读取和写入Excel

Unity/C#使用EPPlus读取和写入Excel

简介&#xff1a;本篇使用EPPlus来将数据写入Excel&#xff0c;如果需要使用NPOI那可以阅读我之前文档使用NPOI创建及写入数据_npoi 模板 写数据-CSDN博客 一、安装EPPlus 这里使用 .unitypackage 文件形式安装 1.1下载NuGetForUnity.unitypackage github进行搜索下载 下载…
阅读更多...
windows 导出 oracle DMP文件

windows 导出 oracle DMP文件

1.dba登录oracle sqlplus /orcl as sysdba 2.创建目录 授权目录 create directory bluesys1016 as C:\bluesys\DemoData; grant read,write on directory bluesys1016 to bluesys; 3.退出sqlplus exit 4.执行expdp expdp bluesys/bluesysorcl directorybluesys1016 dumpfil…
阅读更多...
HarmonyOS Next应用开发——图像PixelMap压缩保存

HarmonyOS Next应用开发——图像PixelMap压缩保存

【高心星出品】 图片编码保存 图片编码指将PixelMap编码成不同格式的存档图片&#xff0c;当前支持打包为JPEG、WebP、png和 HEIF(不同硬件设备支持情况不同) 格式&#xff0c;用于后续处理&#xff0c;如保存、传输等。图片编码是图片解码-图片处理-图片保存的最后环节&…
阅读更多...
7. 配置

7. 配置

三种获取配置的方法 返回 /config/config.php 、/config/autoload/xxx.php 中的值 <?php namespace App\Controller;use Hyperf\Config\Annotation\Value; use Hyperf\Contract\ConfigInterface; use Hyperf\Di\Annotation\Inject; use Hyperf\HttpServer\Annotation\AutoC…
阅读更多...
Python教程：制作贪吃蛇游戏存以exe文件运行

Python教程：制作贪吃蛇游戏存以exe文件运行

Python&#xff0c;作为一种解释型、面向对象、动态数据类型的高级程序设计语言&#xff0c;其简洁易懂的语法和丰富的库使得它成为开发小游戏的理想选择。 下面&#xff0c;我们就来一步步教大家如何用Python制作一个贪食蛇小游戏&#xff0c;并将其打包成exe程序&#xff0c…
阅读更多...
探讨人工智能领域所需学习的高等数学知识及其应用场景，涵盖了微积分、线性代数、概率论等多个数学分支。

探讨人工智能领域所需学习的高等数学知识及其应用场景，涵盖了微积分、线性代数、概率论等多个数学分支。

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下本文主要探讨了人工智能领域所需学习的高等数学知识及其应用场景。文章详细列出了人工智能中涉及的数学公式&#xff0c;涵盖了微积分、线性代数、概率论等多个数学分支。同时&#xff0c;本文深入介绍了这些数学知…
阅读更多...
最新文章

Copyright @ 2022~2023