项目介绍
vue-cli
构建初始项目目录vue2
、vue-router2
、Element-ui
、express
、webpack2
、gulp
构建项目开发环境目录及文件的改动,均含详细备注
项目区分
操作指令
npm install 安装依赖
npm run dev 使用webpack开启前端资源的打包编译
npm run server 启动服务端并开启浏览器
这里需要双开两个命令行窗口,一个负责前端的编译,一个负责服务端的任务流
环境搭建的详细解决思路
详谈注册/登录/登出
一. 登录功能实现的原理二. 登录功能实现的几种方式三. 基本登录 cookie && session 详解四. token登录 详解
浏览器用户提交表单后与服务器产生会话,传递给服务器一个识别信息,同时服务器这边有相应的数据,因此能够对其进行比较,然后识别是否为正确的用户,而且一般需要设定此数据的存储时长,也就是用户认证的时长,过了这个时间段,则会失效,需要重新登录,因此这里需要有四个关键点,浏览器的信息,服务器的信息,两个信息的对比,时效设定。
基本登录 cookie && session浏览器提交用户表单后,服务器接受表单中的用户信息,将其存在session表中(session表存在内存,数据库,缓存等),然后以cookie的方式(cookie中存有sessionId及对应值)传回给浏览器,这样只要服务端设置的cookie没有失效,则在这段时间内,服务端便能正确识别用户信息,不用重复登录(sessionID是在服务端销毁的)
token
(JSON Web Token)
参考资料:
八幅漫画理解使用JSON Web Token设计单点登录系统
用户提交其信息表单(比如包含username,password),服务端收到后,将username转为userId存储在JWT的payload(负荷)中,与头部进行Base64编码拼接后进行签名,于是形成了JWT,在cookie中保存返回给浏览器并设置时效,在失效之前浏览器每次请求时都会携带有JWT的cookie,因此服务端可以对JWT进行解密,与数据库中的user进行比较,确认无误后,便返回请求。
单点登录(一个站点登录,其余站点皆可登录)
第三方:access_token
通过mongoose建立数据模型,以name为主索引并设置其唯一属性,此例中,我们服务端采用内存储存sessionId,也可尝试mongoDB或redis等,均有相应的中间件可以使用。
登录 POST: /api/login
在前端vue中怎样识别登录状态,当输入用户表单后点击登录,我们向/api/login
发起了pos
t请求,/api/login
对应的控制器中进行了这样几步流程
request中包含的用户信息(用户名,密码),生成mogoose实例
进入mongoDB中查找此用户名的信息(User 的Skema模型中已经设定name为唯一的索引,不能重复的)
没有找到,返回无此用户名,找到则与数据库中的密码与此密码进行比较(在生成mongoose实例时,都将密码进行了sha1加密)
密码匹配正确,返回正确信息,并写入session
// 用户信息写入 session
delete user.password;
req.session.user = user;
密码匹配失败,否则返回密码错误的信息
在其它如/api/register、/api/user中通过判断req.session.user的存在与否,来实现登录登出状态的改变
checkLogin(req, res, next) {
if (!req.session.user) {
return res.json({
error: '未登录'
});
}
next();
},
checkNotLogin(req, res, next) {
if (req.session.user) {
return res.json({
error: '已登录'
});
}
next();
}
至此,当流程跑通之后,我们能够得到返回登录成功的信息,接下来就可以在前端通过vue-router
实现跳转,以及将获取的user信息填入localstorage
,供其它页面使用其数据。
注册 POST: /api/register
注册功能的实现,同样当我们填写完注册表单后, /api/register
对应的控制器中将接受我们提交之后的数据。
objectid-to-timestamp
将实例中的objectId转化为时间格式,即为此实例的创建时间,具体可看疑问详解。登出 GET:/api/user
此api的作用是实现登出功能的,当点击登出后,vue通过axios访问此api,api对应的控制器中将执行以下代码
// delete user session
req.session.user = null;
res.json({
message:'登出成功'
})
登录状态判断
使用axios的拦截器,后端通过checkLogin函数判断session是否存在,返回sesssion的状态,在axios的响应拦截器中进行跳转设置,具体代码参见./src/util/interceptor.js
注册登录的实现基本和session相同,除了数据库模型中添加了token属性,然后主要是登录状态的不同
使用token判断登录状态,主要是后端的checkToken,将前端请求中携带的token进行解码,获取其设置的有效时长,从而返回token状态,同样使用axios的拦截器,在请求拦截器中添加头部Authorization的token,在响应拦截器中设置判断
疑问详解
objectid-to-timestamp 包的作用
首先了解MongoDB中的ObjectId
,每一个document(即MySQL中的row每一行数据),均含有一个_id
的属性,而其属性值即为ObjectId
ObjectId
是一个12字节 BSON 类型数据,有以下格式:
因此它的作用即是将前四个字节转化为时间格式。
浏览器刷新之后,vuex维护的全局状态全部消失
router.beforeEach((to, from, next) => {
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
})
// vue-router 的导航钩子函数beforeEach
to : 将要进入的 路由对象
from : 当前导航正要离开的路由
next : 调用next(), resolve beforeEach这个钩子,即调用后,表示这个钩子函数结束了,同时里面可以设置一些跳转等
path: 表示将要跳转的路由
query: 配置路由url的参数
fullPath: 完成解析后的 URL,包含查询参数和 hash 的完整路径。
query: {
redirect: to.fullPath
}
这个表示,在当前路由中添加查询参数redirect,以及redirect的值to.fullPath,
to.fullPath表示跳转之前的路由url
今天分享一个使用Spring security的一个坑。。。 废话不说,上代码: <!-- 登录页面login.html --> <form id="login-form" action="/login.do"> 用户名:<input type="text" name="username"/> <br> 密码:<input type="password" name="password"/>
1 背景分析: 参照其他网上教程的配置后,在账号、密码、主目录都是正确的情况下,可能会遇到账号登录提示 530 Login incorrect 的问题。 网络上有好多解决方案,例如修改/etc/vsftpd.conf文件 将pam_service_name=vsftpd 修改为 pam_service_name=ftp ,虽然能够解决这个问题,但是这种方法其实是错误的。这样由于/etc/pam.d
用户登录组件Flask-Login 文档: 中文:http://www.pythondoc.com/flask-login/ 英文:https://flask-login.readthedocs.io/en/latest/ 简要说明 flask_login提供的方法 # 类 UserMixin 用户类 #方法 login_user() 用户登入 logout_user() 登出功能
一、环境说明 1、ubuntu: 18.04.2 LTS 2、docker: 19.03.5, build 633a0ea838 二、问题描述 使用 docker login命令登录 Docker Hub时报错。 $ docker login Login with your Docker ID to push and pull images from Docker Hub. If you don'
reference https://blog.csdn.net/mouday/article/details/115948156 https://flask-login.readthedocs.io/en/latest/ http://www.pythondoc.com/flask-login/ https://www.jianshu.com/p/5a25413b4828 code from fl
问题内容: 我一直在阅读,尚未找到解决方案。所以去。 我正在尝试升级到Facebook的新SDK 4.1 Android SDK。我可以使用以下代码使用Facebook的LoginButton成功登录用户: 用户登录后,我想知道用户何时使用相同的按钮登录。用户登录后,登录按钮更改为“注销”。我想知道的是,我如何才能监听到LoginButton的成功注销?(我知道这可以注销用户。但是我正在寻找的是某
问题内容: 我正在尝试了解其工作原理。 我在他们的文档中看到他们使用预先填充的用户列表。我想玩一个数据库存储的用户列表。 但是,我不了解本模块中的某些内容。 每次请求都会调用此代码吗?这是用来加载我的用户对象的所有详细信息吗? 现在,我有以下代码: 当我访问/ make-login时,我想登录。 我的用户类别: 另外,我写了另外两个用于身份验证/注册的功能 我不知道如何使它与MySQL一起使用。另
问题内容: 我正在使用JDBC和它的新功能。但我不断收到此运行时异常: 这是给定的代码 如何使此代码起作用?我只是JDBC的初学者。 对于上面的代码;PASS =“ passowrd”,USER =“ root” 我在通过此站点修复的端口上遇到了问题 非常感谢 问题答案: 请在mysql数据库中检查数据库名称“ kholofedb ”是否存在 我想你还没有创造 请检查一次(如果没有创建)及其相关表
问题内容: 我正在使用Spring Security。我想显示登录错误消息,例如登录失败或帐户被锁定。如何在登录页面上显示此类消息? 问题答案: 只需配置为,然后从该servlet设置属性即可,例如 并将此请求转发到登录页面。 或提供 如 检查jsp上的参数 并有条件地打印消息
问题内容: 我不得不重新测试,以前工作正常,但现在却出现了错误。 我也尝试过使用其他定位器,例如。但仍然出现相同的错误。 问题答案: 当您访问url时,有一个阻止UI的Ajax加载器,因此我们必须等待Ajax加载器完成所有WebElement的加载,并且and 字段变为可见。为了实现这一目标,我们将推出即与设置为对field.Here是工作代码块:
本文向大家介绍Oracle SqlPlus设置Login.sql的技巧,包括了Oracle SqlPlus设置Login.sql的技巧的使用技巧和注意事项,需要的朋友参考一下 sqlplus在启动时会自动运行两个脚本:glogin.sql、login.sql这两个文件 执行顺序为 1.默认在在$ORACLE_HOME/sqlplus/admin路径下查找glogin.sql文件执行 2.默
问题内容: 如何获取烧瓶上的复选框是否已选中我正在使用Flask开发服务器环境使用Flask,Gevent和Web套接字进行项目。我用过。这里 如何获得每个连接的唯一会话ID? 我想将其存储在数据库中,并在客户端断开连接后将其删除。 如何获得活动连接总数 问题答案: 没有会话ID。 Flask中的会话只是Cookie的包装。你保存在上面的内容经过数字签名,并以cookie的形式发送给客户端。当你发
问题内容: 我现在使用的装饰器。无论如何,使其成为默认行为? 问题答案: 我在仪器项目中做到了这一点。我使用装饰器: 然后,我is_public()为无需登录即可访问的几个地方创建了一个装饰器: