场景
我们可以使用 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);
登录验证
前端代码
<template>
<div>
<h2>登录页</h2>
<form action="">
用户名:<input type="text" v-model="userInfo.user"> <br>
密 码:<input type="password" v-model="userInfo.password"><br>
<button @click="handlerLogin">登录</button>
</form>
</div>
</template>
<script setup lang="ts">
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);
});
}
</script>
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
<template>
<div>
<h1 class="h1">我是test文件</h1>
</div>
</template>
<script setup lang="ts">
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()
</script>
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}!`))
