登录校验的实现

最新推荐文章于 2024-05-06 17:43:05 发布

风铭大师

最新推荐文章于 2024-05-06 17:43:05 发布

阅读量5.9k

点赞数 3

分类专栏：后端 Vue 文章标签：登录校验的实现

本文链接：https://blog.csdn.net/weixin_42839080/article/details/83748734

版权

Vue 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

后端

6 篇文章 0 订阅

订阅专栏

在前端领域,一个避不开的话题就是登录验证的实现,本文将通过3种方式来实现登录验证:

一 php+js实现登录验证

开发时,前后端分离提供的接口如下:

## 用户登录的接口
type : post
url : api/doLogin.php
data : 
    password  
    email
响应体: ok  或则 fail


## 判断登录成功的接口
type : get 
url : api/checkLogin.php
data : 不传
响应体: ok  或则 fail

实现登录校验的整体思路:
在这里插入图片描述

现在书写接口定义:

1.1 判断用户登录的接口

<?php

    //判断是否登录,如果没有登录,那么打回登录页面
    //开启session
    session_start();
    //获取
    // $userInfo = $_SESSION['userInfo'];

    if(isset($_SESSION['userInfo'])) {
        echo "ok";
    }else {
        echo "fail";
    }

?>

1.2 用户登录的接口

<?php
	//封装的操作数据库的方法
    include_once "./tools/executeSql.php";

    //获取传递过来数据
    $password = $_POST['password'];
    $email = $_POST['email'];

    // echo $password;
    // echo $email;
    
    //查库进行判断
    $sql = " select *from users where email = '$email' and password = '$password'  ";
    $data = excute_select($sql); //返回的数据是一个二维数组

    // var_dump($data);
    // return;
    //判断
    if(count($data)) {

        //将用户的信息存入cookie里面不安全,存入到seesion里面
        //开启session
        session_start();
        $_SESSION['userInfo'] = $data[0]; //$data[0]包含了用户的所有信息

        echo "ok";
    }else {
        echo "fail";
    }
?>

1.3 前端页面实现登录校验的代码:

<script>
    //程序一加载就执行这个语句,判断用户有没有登录
    var xhr = new XMLHttpRequest();
    //设置请求行
    xhr.open('get','api/checkLogin.php');
    //发送请求
    xhr.send();
    //监听响应
    xhr.onload = function(){
      // console.log(xhr.responseText);
      if(xhr.responseText.trim() != "ok") {
  
          //打回登录页
          location = "login.html";
      }
    }    
</script>

在前台的所有需要登录校验的页面里,加上这样一段代码,判断用户是否已经登录了,这里需要注意的是:这段代码应该放在那里?

因为,页面一加载就需要判断是否登录过,所以需要这样放置代码:

<!DOCTYPE html>
<html lang="zh-CN">
	<!--放置用户是否登录的代码-->
    <script>
       //判断用户是否登录 
     </script>
<head>

因为页面的解析是从上到下的,只有在页面一开始就判断用户是否登录,这样才有效.然后将这段代码放置到所有需要校验的页面里就可以了

二 nodeJS实现登录校验

nodeJS里面的登录校验是利用nodeJS的门禁系统(权限管理),在nodejs中我们可以拦截到所有的用户http请求,此时我们就可以加以判断,看是否登录过了.

在这里插入图片描述
这里的nodeJS运用了express框架来书写:

//1. 引入express组件
const express = require('express');
const path = require('path');
const app = express();
//1.2 引入操作seesion的组件
const session = require('express-session')



//2.1 使用express的静态资源
app.use(express.static(path.join(__dirname,"static")));
//2.2 使用session的组件 // 集成session中间件  req.session.xxx = yyy   req.session.xxx
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}));

//2.2 引入模板引擎
app.engine('html', require('express-art-template'));


//3.0 门禁系统(权限设置)
// 第一个参数 /* 表示除了静态资源的请求之外所有的请求
// 第二个参数 next 表示放过
app.all('/*',(req,res,next) => {
    
    if(req.url.includes('account')) { //账号有关,放过
        next();
    }else { //需要登录校验的页面
        //判断是否登录
        if(req.session.loginName != null) {
            next();
        }else {
            //打回登录页面
            res.send('<script>location.href = "/account/login.html";</script>');    
        }
    }  
})


//3.1 集成处理请求的组件处理账号模块
const accountRouter = require(path.join(__dirname,'./routers/accountRouter.js'));
//使用路由模块,处理账号模块
app.use('/account',accountRouter);

//3.2 集成处理请求的组件处理学生模块
const studentRouter = require(path.join(__dirname,'./routers/studentRouter.js'));
//使用路由模块,处理学生模块
app.use('/student',studentRouter);



//4. 开启服务
app.listen(5000,"127.0.0.1",err => {
    if(err) {
        console.log(err);
    }else {
        console.log('web start!!!');
    }
})

通过上面的代码就可以实现权限控制:

//3.0 门禁系统(权限设置)
// 第一个参数 /* 表示除了静态资源的请求之外所有的请求
// 第二个参数 next 表示放过
app.all('/*',(req,res,next) => {
    
    if(req.url.includes('account')) { //账号有关,放过
        next();
    }else { //需要登录校验的页面
        //判断是否登录
        if(req.session.loginName != null) {
            next();
        }else {
            //打回登录页面
            res.send('<script>location.href = "/account/login.html";</script>');    
        }
    }  
})

三 vue实现登录验证

vue的登录校验与前面两种很相识,可以说是将前面两种糅合在一起.vue里面也有门禁控制的模块就是vue router的导航守卫.

//2. 设置路由规则
const router = new VueRouter({
    // (缩写) 相当于 routes: routes
    routes: [
        { path: "/", redirect: "/goodlist" }, //重定向
        { name: "GOODLIST", path: "/goodlist", component: goodlist }, //设置goodlist路由规则
        { path: "/goodInfo/:goodsId", component: goodInfo }, //设置goodinfo路由规则
        { path: "/shopcart", component: shopcart }, //设置shopcart路由规则
        { name: "login", path: "/login", component: login}, //设置登录页的路由规则

        /************需要登录验证的部分 *******************/
        { name: "order", path: "/order", component: order, meta: { checkoutLogin: true } }  //设置order路由规则,这里是params传值      
    ]
});


//3.利用导航守卫做登录验证
router.beforeEach((to, from, next) => {

    //from是来的页面,to是去的也页面,next是权限控制
    if(to.path != "/login") {
        //如果不是登录请求页面,那么记录来的路径方便以后使用
        localStorage.setItem('wantVisitPath',to.fullPath)
    }


    if(to.meta.checkoutLogin) { //需要登录校验的部分
        //发请求校验
        const url = `site/account/islogin`
        axios.get(url).then(res=>{
            if(res.data.code == "logined") { //登录过
                next()
            }else {
                //没登录打回到登录页
                // router.push({ path : "/login" })
                router.push({ name: "login" })
            }
        })
    }else { //不需要登录校验的部分
        next() 
    }  
})

具体的导航守卫可以参见导航守卫的使用

风铭大师

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
登录校验的实现

在前端领域,一个避不开的话题就是登录验证的实现,本文将通过3种方式来实现登录验证:一 php+js实现登录验证开发时,前后端分离提供的接口如下:## 用户登录的接口type : posturl : api/doLogin.phpdata : password email响应体: ok 或则 fail## 判断登录成功的接口type : get url...
复制链接

扫一扫