vue項(xiàng)目中Token的使用方式

更新時(shí)間：2024年09月03日 09:12:37 作者：Ocean__Lv

這篇文章主要介紹了vue項(xiàng)目中Token的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Token的使用

1.Token驗(yàn)證的基本流程

1.服務(wù)端收到請(qǐng)求，去驗(yàn)證用戶(hù)名與密碼
2.驗(yàn)證成功后，服務(wù)端會(huì)簽發(fā)一個(gè) Token，再把這個(gè) Token 發(fā)送給客戶(hù)端
3.客戶(hù)端收到 Token 以后可以把它存儲(chǔ)起來(lái)，比如放在 Cookie 里或者 Local Storage 里
4.客戶(hù)端每次向服務(wù)端請(qǐng)求資源的時(shí)候需要帶著服務(wù)端簽發(fā)的 Token
5.服務(wù)端收到請(qǐng)求，然后去驗(yàn)證客戶(hù)端請(qǐng)求里面帶著的 Token，如果驗(yàn)證成功，就向客戶(hù)端返回請(qǐng)求的數(shù)據(jù)

2. 了解與token相關(guān)的概念

2.1 JWT標(biāo)準(zhǔn)的Token有如下三個(gè)部分

header (頭部)
payload （數(shù)據(jù)）
signature （簽名）

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInVzZXJfaWQiOjEsImlhdCI6MTU5NDI2MjQ5NSwiZXhwIjoxNTk0MzQ4ODk1fQ.1MJ_MAFgpBjOjpggj69Xz8F_evBcMAenRK_7a8fdVrc

2.2 安裝兩個(gè)依賴(lài)包

依賴(lài)包：jsonwebtoken
作用：生成token與驗(yàn)證

npm install jsonwebtoken --save

jsonwebtoken的兩個(gè)api

生成token的方法 sign
驗(yàn)證token的方法 verify

依賴(lài)包： express-jwt

千萬(wàn)千萬(wàn)注意版本： 6.1.1

npm install express-jwt@6.1.1 --save

express-jwt的作用

驗(yàn)證token是否過(guò)期并規(guī)定哪些路由不需要驗(yàn)證 express-jwt({})

2.3 token Express后端相關(guān)代碼

定義生成token和獲取token的函數(shù)

/token/token.js

const jwt = require('jsonwebtoken');

// 密鑰
const jwtSecret = 'dkfjdjfkdfdfd';  //簽名

//登錄接口 生成token的方法
// setToken攜帶的參數(shù)及參數(shù)的數(shù)量自定義
const setToken = function (user_name) {
    return new Promise((resolve, reject) => {
        //expiresln 設(shè)置token過(guò)期的時(shí)間
        //{ user_name: user_name, user_id: user_id } 傳入需要解析的值（ 一般為用戶(hù)名，用戶(hù)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)
    })
}
//各個(gè)接口需要驗(yàn)證token的方法
const getToken = function (token) {
    return new Promise((resolve, reject) => {
        if (!token) {
            console.log('token是空的')
            reject({
                error: 'token 是空的'
            })
        }
        else {
            // 驗(yàn)證token
            var info = jwt.verify(token.split(' ')[1], jwtSecret);
            resolve(info);  //解析返回的值（sign 傳入的值）
        }
    })
}

module.exports = {
    setToken,
    getToken
}

2.4 解析token,驗(yàn)證token

app.js

const express = require("express")
const app = express()
//express跨域
const cors = require("cors")
// 生成token和驗(yàn)證token是否正確的函數(shù)
const vertoken=require('./token/token')

//驗(yàn)證token是否過(guò)期，并規(guī)定哪些路由不用驗(yàn)證token
const expressJwt=require('express-jwt')

const bookRouter = require("./router/bookRouter")
const userRouter = require("./router/userRouter")
app.use(cors())


//=============================================驗(yàn)證token

//解析token獲取用戶(hù)信息
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();
        })
    }
});

//驗(yàn)證token是否過(guò)期并規(guī)定那些路由不需要驗(yàn)證
app.use(expressJwt({
    secret:'dkfjdjfkdfdfd',
    // 加密算法
    algorithms:['HS256']
}).unless({
    path:['/login']  //不需要驗(yàn)證的接口名稱(chēng)
}))



//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("服務(wù)器已開(kāi)啟在3000端口");
})

2.5 登錄接口

/router/usersRouter.js

const express = require("express")
const router = express.Router()
const conn = require("../db/db")
const vertoken = require("../token/token")

// 查詢(xún)商品
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('查詢(xún)數(shù)據(jù)庫(kù)失敗');
        } else {
            let data;
            if (result.length) {
                //==============================================調(diào)用生成token的方法
                vertoken.setToken(user_name).then(token => {
                    data = {
                        code: 0,
                        message: '登錄成功',
                        token: token
                        //前端獲取token后存儲(chǔ)在localStroage中,
                        //**調(diào)用接口時(shí) 設(shè)置axios(ajax)請(qǐng)求頭Authorization的格式為`Bearer ` +token
                    }
                    res.send(data)
                })
            } else {
                data = {
                    code: 1,
                    msg: '登錄失敗 '
                }
                res.send(data)
            }
            
        }
    })
})


module.exports = router

3. token Vue前端相關(guān)代碼

登錄后獲取token

axios.post("http://localhost:3000/login")
    .then((res) => {
        console.log('login返回的數(shù)據(jù)');
        if (res.data.code == 0) {
        
			alert('登錄成功')
        	//存儲(chǔ)token
       		 sessionStorage.setItem("token",res.data.token)
        }
    });

前端請(qǐng)求攜帶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("請(qǐng)登錄");
      }
    },
  },