在前端领域,一个避不开的话题就是登录验证的实现,本文将通过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()
}
})
具体的导航守卫可以参见导航守卫的使用