vue+koa2实现session、token登陆状态验证的示例
session 登陆与 token 登陆的区别
1、session 登陆是在服务器端生成用户相关 session 数据,发给客户端 session_id 存放到 cookie 中,这样在客户端请求时带上 session_id 就可以验证服务器端是否存在 session 数据,以此完成用户认证。这种认证方式,可以更好的在服务端对会话进行控制,安全性比较高(session_id 随机),但是服务端需要存储 session 数据(如内存或数据库),这样无疑增加维护成本和减弱可扩展性(多台服务器)。 csrf 攻击一般基于 cookie。另外,如果是原生 app 使用这种服务接口,因为没有浏览器 cookie 功能,所以接入会相对麻烦。
2、基于 token 的用户认证是一种服务端无状态的认证方式,服务端不用存放 token 数据。用户验证后,服务端生成一个 token(hash 或 encrypt)发给客户端,客户端可以放到 cookie 或 localstorage 中,每次请求时在 header 中带上 token,服务端收到 token,通过验证后即可确认用户身份。这种方式相对 cookie 的认证方式就简单一些,服务端不用存储认证数据,易维护扩展性强,token 存在 localstorage 可避免 csrf,web 和 app 应用都比较简单。不过这种方式在加密或解密的时候会有一些性能开销(好像也不是很大),有些对称加密存在安全隐患(aes cbc 字节翻转攻击)。
koa + session 登陆验证
1、首先要安装 koa-sisson 包
npm install koa-session -s
koa-session 实际上是通过 cookie 来保存信息的。koa-session 在服务器上生成一个信息,通过加密后,以 cookie 的形式发送到用户的浏览器,在用户浏览器上可以看到是一个加密的 cookie 字段,然后在服务端路由中通过 ctx.session.xx 来获取 xx 这个信息。而当每次当用户发送请求时候,就可以获取到这个 cookie,koa-sesscion 会内部会帮我们解密为最初的存储的信息,于是我们可以通过判断这个 cookie 是存在来校验用户是否已经登录了。
2、app.js 中初始化
const koa = require('koa') const app = new koa() const session = require('koa-session') const bodyparser = require('koa-bodyparser') const router = require('koa-router') const router = new router() const config = { key: 'koa:sess', /** (string) cookie key (default is koa:sess) cookie 的name */ /** (number || 'session') maxage in ms (default is 1 days) */ /** 'session' will result in a cookie that expires when session/browser is closed */ /** warning: if a session cookie is stolen, this cookie will never expire */ maxage: 86400000, /** cookie 的过期时间 */ autocommit: true, /** (boolean) automatically commit headers (default true) */ overwrite: true, /** (boolean) can overwrite or not (default true) */ httponly: true, /** (boolean) httponly or not (default true) */ signed: true, /** (boolean) signed or not (default true) */ rolling: false, /** (boolean) force a session identifier cookie to be set on every response. the expiration is reset to the original maxage, resetting the expiration countdown. (default is false) */ renew: false, /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/ } app.keys = ['login secret'] // 加密密钥 app.use(session(config, app)); app.use(bodyparser()) app.use(router.routes()).use(router.allowedmethods())
3、登陆路由
router.post('/login', async (ctx) => { try { const data = ctx.request.body.data const { username, password } = data if (true) { // 保存登录状态,这句代码会在浏览器中生成一个以 "koa:sess" 为 name 的 cookie ctx.session.userinfo = {username: '', userid: ''} ctx.body = {code: 1, message: '登陆成功'} } else { ctx.body = {code: 0, message: '账号或密码错误'} } } catch(err) { throw new error(err) } }) // 前端 axios.post('/login', {username: '', password: ''}).then(res => {})
4、校验是否已登陆
router.get('/getsession', async (ctx) => { try { if (ctx.session.userinfo) { ctx.body = {code: 1, message: '已登陆'} } else { ctx.body = {code: 0, message: '未登陆'} // 跳转到登录页 // ctx.response.redirect('/login') } } catch(err) { throw new error(err) } }) // 前端 axios.get('/getsession').then(res => {})
5、退出登陆
router.post('/logout', async (ctx) => { try { // 将登录信息清空 ctx.session = null // 跳转到登录页或网站首页 ctx.response.redirect('/') } catch(err) { throw new error(err) } }) // 前端 axios.post('/logout').then(res => {})
koa + token 登陆验证
1、安装 jsonwebtoken 包
npm install jsonwebtoken -s
2、app.js 初始化
const koa = require('koa') const app = new koa() const jwt = require('jsonwebtoken') const bodyparser = require('koa-bodyparser') const router = require('koa-router') const router = new router() const tokenconfig = {privatekey: 'xxxxxxxxxxxx'} // 加密密钥 app.use(bodyparser()) app.use(router.routes()).use(router.allowedmethods())
3、登陆路由
router.post('/login', async (ctx) => { try { const data = ctx.request.body.data const { username, password } = data if (true) { const userinfo = {username: '', userid: ''} const token = jwt.sign(userinfo, tokenconfig.privatekey, {expiresin: '7d'}) // 签发 token, 7天有效期 ctx.body = {code: 1, message: '登陆成功', data: {token: 'bearer ' + token}} } else { ctx.body = {code: 0, message: '账号或密码错误'} } } catch(err) { throw new error(err) } })
前端登陆
axios.post('/login', {username: '', password: ''}).then(res => { if (res.data.code === 1) { localstorage.setitem('token', res.data.data.token) // vuex 存储 userinfo 和登陆状态 store.commit('set_userinfo', {userinfo: res.data.data.userinfo, status: true}) } })
4、校验是否已登陆
router.get('/getuserinfo', async (ctx) => { try { const token = ctx.get('authorization') // 获取请求 header 中 authorization 值 let userinfo = {} if (token === '') { ctx.body = {code: 0, message: '未登陆'} } else { try { userinfo = jwt.verify(token.split(' ')[1], tokenconfig.privatekey) // 验证 token ctx.body = {code: 1, message: '已登陆', data: {userinfo: userinfo: loginstatus: true}} } catch(err) { // token 过期或无效 ctx.body = {code: 0, message: '未登陆', data: {userinfo: {}: loginstatus: false}}} } } } catch(err) { throw new error(err) } })
要每次的请求中都带上 token 信息,要给 axios 设置请求拦截
// 请求拦截,在每次请求中的 header 中带上 token axios.interceptors.request.use(config => { let token = localstorage.getitem('token') if (token) { config.headers.common.authorization = token } return config }, error => { return promise.reject(error); })
每次进入页面之前要判断下是否已登陆,是否有权限进入该页面,之前我是在每个页面的 created 钩子函数中去请求 '/getuserinfo' 判断是否以登陆,这样做繁琐,并且页面会先呈现一下,然后一闪而过(验证不过的情况下),在路由钩子函数中可全局配置
// 路由守卫, 在跳转之前执行 router.beforeeach((to, from, next) => { let token = localstorage.getitem('token') let requireauth = to.meta.requireauth // vuerouter 里配置页面是否需要登陆进入 let root = to.meta.root // vuerouter 里配置页面是否需要登陆且管理员权限进入 if (!token) { // vuex 清除 userinfo 和登陆状态 store.commit('set_userinfo', {userinfo: {}, status: false}) requireauth ? next({path: '/'}) : next() } else { axios.get(api.getuserinfo).then(res => { // vuex 存储 userinfo 和登陆状态 store.commit('set_userinfo', {userinfo: res.data.userinfo, status: res.data.loginstatus}) if (requireauth) { if (!res.data.loginstatus || (root && !res.data.userinfo.root)) { next({path: '/'}) } else { next() } } else { next() } }) } }) /** vuerouter { path: '/admin', name: 'admin', meta: { requireauth: true, root: true }, } */
5、退出登陆
因为服务器端并没有存储用户登陆相关信息,只与前端是否存在 token 或是否能验证通过有关,所以退出登陆就将 token 清除即可
methods: { logout() { localstorage.removeitem('token') // vuex 清除登陆信息 store.commit('set_userinfo', {userinfo: {}, status: false}) if (this.$route.path !== '/') { this.$router.push({path: '/'}) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
PHP实现微信公众号验证Token的示例代码
-
vue+koa2实现session、token登陆状态验证的示例
-
实现session登陆时间的验证,验证用户登录页面的一个监听器
-
Node登录权限验证token验证实现的方法示例
-
Token登陆验证机制的原理及实现
-
jwt方式token验证流程及基于java的JJWT的无状态的身份验证实现详解
-
PHP,操作多个用户,多个线程的session,实现用户登陆状态session值的自动更新
-
PHP,操作多个用户,多个线程的session,实现用户登陆状态session值的自动更新
-
关于Session验证登陆状态的一个疑问?
-
vue+koa2实现session、token登陆状态验证的示例