vue项目中使用token令牌验证登录(前后端）个人笔记，仅供参考

1.安装依赖项

npm install jsonwebtoken --save

2.在服务端进行配置

1.新建auth.js文件

const jwt = require('jsonwebtoken');
 
const secretKey = 'woshiaikunmeifannao'
// 生成JWT令牌
const createToken = (payload, options = {}) => {
  const defaultOptions = { expiresIn: '1h' };
  const combinedOptions = Object.assign({}, defaultOptions, options);
  const token = jwt.sign(payload, secretKey, combinedOptions);
  return token;
};
 
// 验证JWT令牌
const verifyToken = (token) => {
  try {
    const decoded = jwt.verify(token, secretKey);
    return decoded;
  } catch {
    // 令牌无效或已过期
    return null;
  }
};
 
// 解码JWT令牌
const decodeToken = (token) => { return jwt.decode(token); };
// 认证中间件
const authenticate = (req, res, next) => {
  const token = req.headers.authorization;
  if (!token) {
    return res.status(401).send('Unauthorized');
  }
  try {
    const decoded = jwt.verify(token, secretKey);
    req.user = decoded;
    next();
  } catch (error) {
    return res.status(401).send('Unauthorized');
  }
};
// 导出生成和验证 Token 的函数以及认证中间件
module.exports = {
  createToken,
  verifyToken,
  decodeToken,
  authenticate,
};

2.新建拦截请求及免拦截请求文件interceptReq.js

const { verifyToken } = require('./auth');
module.exports = (req, res, next) => {
  // 请求拦截是否登陆认证
  const authToken = req.headers['authorization'];
 // 如果登录则继续，以及是特定请求时通过，未登录时其他的请求会被拦截
  if (verifyToken(authToken)) {
    next();
  } else if(req.path==='/login' || req.path==='/register'){
    next();
  } else {
    return res.status(401).sendResponse({
      code: '401',
      data: '未登陆',
      message: 'token校验失败,请登录'
    });
  }
};

3.在app.js中挂载中间件

const express = require('express')
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')
const router = require('./router')
const interceptReq = require('./middleware/interceptReq')


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors());
app.use(router)
app.use(interceptReq);

app.listen(4000,() => {
    console.log("服务器启动成功");
})

3.前端配置

1.安装vue-router  

npm i vue-router -s

这里我简写了，i是install，-s是save作用是将依赖项添加到配置文件中，方便管理

2.新建router文件，新建index.js文件

import {createRouter,createWebHistory} from 'vue-router'

const routes = [
    {
        name : 'homepage',
        path : '/homepage',
        component : () => import('../components/HomePage.vue'),
        /* children :[
            {
                name : 'body',
                path : '/body',
                component : () => import('../views/Body.vue')
            },
            {
                name : 'login',
                path : '/login',
                component : () => import('../views/Login.vue')
            },
        ] */
    },
    {
        name : 'about',
        path : '/about',
        component : () => import('../views/About.vue')
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
})
//设置路由守卫
router.beforeEach((to,from,next) => {
    //这里可以配合store的使用，但是我比较懒。。。直接放到缓存中了
    let token = localStorage.getItem('token');
    if(token=== null || token === '' || token === undefined){
//未登录但是路由跳转到特定页面是允许 上面的路由太多了我删了一部分，所有直接复制会报错┗|｀O′|┛ 嗷
        if(to.path==='/register' || to.path==='/login'){
            next();
        }else {
            alert('请先完成登录');
            next('/login');
        }
    }else {
        next();
    }
})

export default router;

3.同上，在main.js中进行挂载

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from './router/index.js'
import App from './App.vue'

const app = createApp(App);
app.use(ElementPlus);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(router)
app.mount('#app')

4.大功告成

由于我比较懒，后端的接口就写了登录和注册的，没有实践测试。。。仅供参考┗|｀O′|┛ 嗷~~