登录验证实现【学生作业管理系统】

Posted 2023-05-08

参考技术A 基于B/S架构前后端分离式开发：

前端：vue+ElementUI

后端：Node.js+Express框架

功能概要：

1、用户登录后，在开发者设置好的一段时间内，用户的操作不需要再次登录。

2、当有效时间截止后，用户的操作引发系统提示用户需要重新登录后跳转到登录页面。

3、用户点击退出后，系统跳转到登录页面，用户需要再次登录才能使用系统功能。

Session和Cookie可以看做是用来存储用户信息的数据结构。

（1）Cookie:

用户第一次登录后服务器返回Cookie（一般是用户信息）给浏览器，浏览器存储Cookie，在第二次用户发起请求的时候，Cookie被添加到请求头中。服务器接收到请求后，通过判断Cookie的内容识别该请求是否是用户发送的请求。

（2）Session:

功能与Cookie类似，不过本身类似于key-value键值对的数据表，用户第一次登录系统后，Session（value指用户信息）存储在服务中，将SessionID(用户信息标识)发送给浏览器存储，可以在Cookie中查看到浏览器存储的SessionID。用户发送下一次请求的时候，服务器接收SessionID比对自身存储的Session表，判断登录用户的信息是否存在，以此来判断是否为该系统用户发送的请求。

（3）Session与Cookie的区别：

服务器在执行请求操作时先拦截该请求

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

简单来说就是使用导航功能切换页面时可以执行设定好的功能。例如，切换页面时用户的登录有效时间已经结束，在切换页面时判断用户信息是否还存在，不存在则退出到登录页面。

有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

在router文件夹下的index.js文件中可以直接配置路由独享的守卫

定义导航的时候可以配置meta字段：

routes配置中的每个路由对象为路由记录。路由记录是可以嵌套的 ，因此，当一个路由匹配成功后，它可能匹配多个路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

实现登录验证功能需要完成以下几个方面：

服务器方面（node+express）：

前端方面（vue+vue-router）：

本文是作者做项目的归纳与总结，只用于学习用途。

用户登陆模块的后端实现

前述两篇文章“使用BootStrap制作用户登录UI”和“使用BootStrapValidator来完成前端输入验证 ”已经将用户登陆的界面和验证进行了实现，现在看看后端要做的事情（基于ThinkPHP5）。举例来说，比如当学生登陆成功后则进入学生界面，在这个界面中，学生可以提交作业，查看自己作业的批改情况。当用户在前述界面中输入了用户名和密码，选择了学生用户后，点登陆，会进入dologin方法(位于controller\\index\\account\\dologin)，代码如下：

public function dologin()
    {
        $kind=$_POST[\'kind\'];
        if($kind==\'tea\')
        {
            $user=UserModel::get([\'username\'=>$_POST[\'username\'],\'password\'=>md5($_POST[\'pwd\'])]);
            if($user)
            {
                if($user->power==\'common\')
                    echo \'教师登陆成功\';
                else 
                    echo \'管理员登陆成功\';
            }
            
        }else 
        {
            $stu=StuModel::get([\'stu_no\'=>$_POST[\'username\'],\'password\'=>md5($_POST[\'pwd\'])]);
            if($stu)
            {
                $_SESSION[\'stuno\']=$stu->stu_no;
                $this->success(\'登陆成功\',\'Student/\'.$stu->stu_no);
            }
            else 
            {
                $this->error(\'用户名或密码错误\');
            }
        }
    }

这里只对学生逻辑进行了简单的实现。当学生登陆成功后会进入 Student控制器的index方法中，当然需要在rote.php中配置如下路由：

\'index/student/:stuno\'=>\'index/student/index\'

在Student控制器中可以如下处理：

<?php
namespace app\\index\\controller;
use think\\Controller;
use app\\index\\model\\Student as StuModel;
class Student extends Controller{
    public function index($stuno)
    {
        $stu=StuModel::get([\'stu_no\'=>$stuno]);
        echo "欢迎登陆学生界面 ".$stu->stu_name;
    }
}

这里只是简单的阐述了处理和跳转逻辑，当然实际开发中肯定有更丰富的功能和逻辑，以点盖面吧，希望对你有所帮助。

下面是登陆成功后的页面：

 

本文首发顶求网，由作者原创，如需转载请注明出处。