vue项目中Token的使用方式
更新时间:2024年09月03日 09:12:37 作者:Ocean__Lv
这篇文章主要介绍了vue项目中Token的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Token的使用
1.Token验证的基本流程
- 1.服务端收到请求,去验证用户名与密码
- 2.验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端
- 3.客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里
- 4.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
- 5.服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据
2. 了解与token相关的概念
2.1 JWT标准的Token有如下三个部分
- header (头部)
- payload (数据)
- signature (签名)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInVzZXJfaWQiOjEsImlhdCI6MTU5NDI2MjQ5NSwiZXhwIjoxNTk0MzQ4ODk1fQ.1MJ_MAFgpBjOjpggj69Xz8F_evBcMAenRK_7a8fdVrc
2.2 安装两个依赖包
- 依赖包:jsonwebtoken
- 作用: 生成token与验证
npm install jsonwebtoken --save
jsonwebtoken的两个api
- 生成token的方法 sign
- 验证token的方法 verify
依赖包: express-jwt
千万千万注意版本: 6.1.1
npm install express-jwt@6.1.1 --save
express-jwt的作用
验证token是否过期并规定哪些路由不需要验证 express-jwt({})
2.3 token Express后端相关代码
定义生成token和获取token的函数
- /token/token.js
const jwt = require('jsonwebtoken'); // 密钥 const jwtSecret = 'dkfjdjfkdfdfd'; //签名 //登录接口 生成token的方法 // setToken携带的参数及参数的数量自定义 const setToken = function (user_name) { return new Promise((resolve, reject) => { //expiresln 设置token过期的时间 //{ user_name: user_name, user_id: user_id } 传入需要解析的值( 一般为用户名,用户id 等) // const token = jwt.sign({ user_name: user_name }, jwtSecret, { expiresIn: '24h' }); const token = jwt.sign({ user_name: user_name }, jwtSecret, { expiresIn: '10s' }); resolve(token) }) } //各个接口需要验证token的方法 const getToken = function (token) { return new Promise((resolve, reject) => { if (!token) { console.log('token是空的') reject({ error: 'token 是空的' }) } else { // 验证token var info = jwt.verify(token.split(' ')[1], jwtSecret); resolve(info); //解析返回的值(sign 传入的值) } }) } module.exports = { setToken, getToken }
2.4 解析token,验证token
- app.js
const express = require("express") const app = express() //express跨域 const cors = require("cors") // 生成token和验证token是否正确的函数 const vertoken=require('./token/token') //验证token是否过期,并规定哪些路由不用验证token const expressJwt=require('express-jwt') const bookRouter = require("./router/bookRouter") const userRouter = require("./router/userRouter") app.use(cors()) //=============================================验证token //解析token获取用户信息 app.use(function(req, res, next) { let token = req.headers['authorization']; if(token == undefined){ next(); }else{ vertoken.getToken(token).then((data)=> { console.log('解析后的token',data); req.data = data; next(); }).catch((error)=>{ next(); }) } }); //验证token是否过期并规定那些路由不需要验证 app.use(expressJwt({ secret:'dkfjdjfkdfdfd', // 加密算法 algorithms:['HS256'] }).unless({ path:['/login'] //不需要验证的接口名称 })) //token失效返回信息 app.use(function(err,req,res,next){ if(err.status==401){ res.status(401).send('token失效11111111') }else{ next() } }) app.use(bookRouter) app.use(userRouter) app.listen(3000, () => { console.log("服务器已开启在3000端口"); })
2.5 登录接口
- /router/usersRouter.js
const express = require("express") const router = express.Router() const conn = require("../db/db") const vertoken = require("../token/token") // 查询商品 router.post("/login", (req, res) => { let { user_name, pw } = req.body; let sql = "select * from admin where user_name = ? and pw = ?" conn.query(sql, [user_name, pw], function (err, result) { if (err) { console.log('查询数据库失败'); } else { let data; if (result.length) { //==============================================调用生成token的方法 vertoken.setToken(user_name).then(token => { data = { code: 0, message: '登录成功', token: token //前端获取token后存储在localStroage中, //**调用接口时 设置axios(ajax)请求头Authorization的格式为`Bearer ` +token } res.send(data) }) } else { data = { code: 1, msg: '登录失败 ' } res.send(data) } } }) }) module.exports = router
3. token Vue前端相关代码
- 登录后获取token
axios.post("http://localhost:3000/login") .then((res) => { console.log('login返回的数据'); if (res.data.code == 0) { alert('登录成功') //存储token sessionStorage.setItem("token",res.data.token) } });
- 前端请求携带token
methods: { async getList() { let token = localStorage.getItem("token"); if (token) { let res = await axios.get("http://localhost:5000/cart", { headers: { Authorization: "Bearer " + localStorage.getItem("token"), }, }); this.list = res.data.list; } else { alert("请登录"); } }, },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3.0 CLI - 2.1 - component 组件入门教程
这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下2018-09-09
最新评论