场景
我们可以使用 cookie,session,token 来做鉴权。
下面我们来看一下,
如何使用 token 来做鉴权
jwt.sign 的简单介绍
npm install jsonwebtoken 下载
使用 jsonwebtoken 生成token的基本语法。
jwt.sign(payload, secretOrPrivateKey, [options, callback])
第1个参数 payload:可以是表示有效 JSON 的对象文本、缓冲区,字符串。
需要注意的是:如果不是缓冲区或字符串,使用 JSON.stringify
下面我们使用对象文本,就不需要使用 JSON.stringify。
第2个参数 secretOrPrivateKey: 是一个字符串(utf-8编码)、缓冲区、对象。
就是说是加密数据。
options:包含的其他选项,如过期时间,
它的选项有:expiresIn 过期时间,如果是数字,单位就是秒。
algorithm: HS256 (默认的算法)
callback:回调函数,包含返回来的错误
使用 jsonwebtoken 生成token
// 生成的token。 expiresIn 数值单位默认是秒s
//expiresIn也可以添加为 expiresIn:'10h' | '10d'
let createToken = jwt.sign({
data: 'jiamideshuju'
}, 'lingpai', { expiresIn: 3 });
// expiresIn: 3 表示的是有效时间是3s。
console.log('生成的token', createToken)
查看生成的token是否过期
// 生成的token。
let createToken = jwt.sign({
data: 'jiamideshuju'
}, 'lingpai', { expiresIn: 3 });
console.log('生成的token', createToken)
setTimeout(()=>{
// 查看token是否过期
var decoded = jwt.verify(createToken, 'lingpai')
console.log('4s后token是否过期', decoded)
},4000)
封装生成token与验证token是否过期
utils/createTokenCheck.js文件
// 引入 jsonwebtoken
let jwt = require('jsonwebtoken');
let lingpai = 'weislingpai'
const createTokenCheck = {
// 生成的token。并设置过期时间
getToken(jiamiData,expiresIn=3){
return jwt.sign({
data: jiamiData
}, lingpai, { expiresIn: expiresIn })
},
// 检查token是否过期
verify(token){
try {
return jwt.verify(token, lingpai)
} catch (error) {
// 如果报错返回false.[因为token有可能过期,就会报错]
console.log('error:', error)
return false
}
}
}
// 暴露出去,其他地方调用就行
module.exports = createTokenCheck
app.js文件调用
const createTokenCheck =require('./utils/createTokenCheck')
let token= createTokenCheck.getToken('zhangsan',2)
console.log('不会过期', token)
setTimeout(() => {
let data=createTokenCheck.verify(token)
console.log('过期返回false', data)
}, 3000);
登录验证
前端代码
登录页
用户名:
密 码:
import {reactive} from 'vue'
import axios from 'axios'
const userInfo = reactive({
user:'',
password:''
})
const handlerLogin=()=>{
axios.post('http://127.0.0.1:3000/login', {
user:userInfo.user,
password: userInfo.password,
}).then(res => {
console.log(res);
}).catch(error => {
console.log(error);
});
}
app.js
app.post('/login', function(req, res) {
console.log('req', req.body)
//通过req.body接收传递的参数
let { user, password } = req.body
// 我们假设用户是这样就会成功
if(user==='zhangsan'&& password==='123'){
// 生成token 过期时间设置为10s
let token= createTokenCheck.getToken('zhangsan',10)
// 发送token
res.send({
code: 'ok',
msg:'登录成功',
token:token
});
}else{
res.send({
code: 'fail',
msg: '登录失败',
});
}
})
无法加载响应数据: No data found for resource with given identifier
我们现在需要下载 cors
npm i cors
然后在app.js中引入
const cors = require('cors')
// 放置在路由的前面
app.use(cors())
‘req.body’ as it is undefined.
//放置在路由的前面
app.use(express.json());
前端接口携带token
携带token
我是test文件
import axios from 'axios'
const handlerLogin=()=>{
axios.post('http://127.0.0.1:3000/list',{},{
headers:{
authorization: localStorage.getItem('token')
}
}).then(res => {
console.log(res)
console.log(res);
}).catch(error => {
console.log(error);
});
}
handlerLogin()
aap.js代码
const createTokenCheck =require('./utils/createTokenCheck')
// 处理跨域
const cors = require('cors')
const express = require('express')
const app = express()
app.use(cors())
// 处理 'req.body' as it is undefined.
app.use(express.json());
const port = 3000
app.get('/', (req, res) => res.send('Hello World!'))
app.post('/login', function(req, res) {
console.log('req', req.body)
//通过req.body接收传递的参数
let { user, password } = req.body
// 我们假设用户是这样就会成功
if(user==='zhangsan'&& password==='123'){
// 生成token 过期时间设置为10s
let token= createTokenCheck.getToken('zhangsan',10)
// 发送token
res.send({
code: 'ok',
msg:'登录成功',
token:token
});
}else{
res.send({
code: 'fail',
msg: '登录失败',
});
}
})
app.post('/list', (req, res) =>{
let getToken = (req.headers && req.headers.authorization) || ''
if(getToken){
// 检查token是否过期
if(createTokenCheck.verify(getToken)){
res.send({
code: 'ok',
list: [
{name:'张三',grade:98, status:'通过考试'},
{name:'李四',grade:58, status:'未通过考试'},
{name:'王五',grade:78, status:'通过考试'}
]
});
}else{
res.send({
code: 'fail',
list: [],
msg:'token过期'
});
}
}else{
res.send({
code: 'fail',
list: [],
msg:'请携带token'
});
}
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
你好,我是豌豆花下猫。这里记录每周值得分享的 Python 及通用技术内容,部分为英文,已在小标题注明。(标题取自其中一则分享,不代表全部内容都是该主题,特此声明。) 文章&教程 1、掌握Python面向对象编程的关键:类与对象 介绍类和对象概念,通过…