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("请登录");
      }
    },
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • el-upload大文件切片上传实现示例详解

    el-upload大文件切片上传实现示例详解

    这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue3+vite+SQL.js如何读取db3文件数据

    vue3+vite+SQL.js如何读取db3文件数据

    这篇文章主要介绍了vue3+vite+SQL.js如何读取db3文件数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • 一文搞定vue3中的函数式弹窗

    一文搞定vue3中的函数式弹窗

    函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧
    2024-01-01
  • vue 2.0路由之路由嵌套示例详解

    vue 2.0路由之路由嵌套示例详解

    这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • vue子组件created方法不执行问题及解决

    vue子组件created方法不执行问题及解决

    这篇文章主要介绍了vue子组件created方法不执行问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现登录、注册、退出、跳转等功能

    vue实现登录、注册、退出、跳转等功能

    这篇文章主要介绍了vue实现登录、注册、退出、跳转等功能,需要的朋友可以参考下
    2020-12-12
  • Vue内部渲染视图的方法

    Vue内部渲染视图的方法

    这篇文章主要介绍了Vue内部渲染视图的方法,本文通过实例代码图文并茂的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue3.0 CLI - 2.1 -  component 组件入门教程

    vue3.0 CLI - 2.1 - component 组件入门教程

    这篇文章主要介绍了vue3.0 CLI - 2.1 - component 组件入门教程,本文主要的关注点就是组件,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-09-09
  • vue基于websocket实现智能聊天及吸附动画效果

    vue基于websocket实现智能聊天及吸附动画效果

    这篇文章主要介绍了vue基于websocket实现智能聊天及吸附动画效果,主要功能是基于websocket实现聊天功能,封装了一个socket.js文件,使用Jwchat插件实现类似QQ、微信电脑端的功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Ant Design_Form表单上传文件组件实现详解

    Ant Design_Form表单上传文件组件实现详解

    这篇文章主要为大家介绍了Ant Design_Form表单上传文件组件实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论