登录逻辑前后端全流程(vue3 pinia nodejs)

  • 简述

输入用户名密码,post请求发给后端;如果登陆成功,后端用JWT创建并返回token,前端保存token(pinia & localstorage)。跳转任意页面之前,如果没有token(没登陆的情况)OR token过期的情况,都要跳转至login页面

  • 详细讲解

( 前端)点击登录后,后端返回token,前端存在pinia(仓库)中,同时localstorage保存(浏览器记录)。注意token是域名下独立的(京东有token 淘宝有token)。

页面保护:不能在没有token的情况下,(用户在地址栏手动输入网址)跳转其他页面。路由定义使用meta选项,自行定义 meta: {authRequires:true},表示这个路由需要登录才能访问。这里使用到导航守卫

router.beforeEach((to, from, next)=>{
    const token = localStorage,getItem('item')
    if(to.name != 'login' && !token) next({name: 'Login'})
    else next()
})
代码含义:如果用户不能验证身份,则返回login
这里也能看出路由定义时 name选项的作用

上述代码也有问题,if条件只判断了是否有token,完全可以自己在localstorage中添加一个空白token,验证也能通过。所以前端无法验证token是否正确(有效),后端才行。前端常通过设置请求头发送token给后端。用到请求响应拦截器。

import axios from "axios";
let request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000
})

request.interceptors.request.use((config) => {
  // 从本地获取token,这里需要根据实际情况来获取
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
    注意这里后端处理的时候,要截取字符串,'Bearer '后面的才是token  在后端.split(' ')[1] 或者 .slice(7)
  }
  return config;
})

后端接口保护:防止别人跳过页面直接调用接口对数据进行修改。因此在调用数据库接口之前,定义一个函数验证token。JWT创建token,签发 验证。

JWT签发token是通过加密id得到的,因此解密完token就是id,就能验证用户信息。

后端返回参数
200成功;201创建成功;204无内容,删除成功。
301永久重定向;302临时重定向(临时被攻击)
400 发送的请求后端无法理解,可能是参数传的不对(请求头请求体查询参数路径参数);401没登陆(前端要么没有传token 要么传错了);403没权限;404(前端:地址写错,请求方法错了)
500服务器内部出错;502有可能后端配置错误;503超载 秒杀系统;
  • JWT相关的操作封装
const jsonwebtoken = require('jsonwebtoken')

const secret = 'haha'
const JWT = {
  generate(value,expires) {
    return jsonwebtoken.sign(value,secret,{expiresIn: expires})
  },
  verify(token) {
    try {
      return jsonwebtoken.verify(token,secret)
    } catch(e) {
      return false
    }
  }
}

module.exports = JWT
  • 签发token时
const token = JWT.generate({
  _id: ans[0]._id,
   username: ans[0].username
 },'1d')
  • 验证token时
let payload = JWT.verify(token)

验证失败返回false
验证成功返回token解密后的数据
  • 其他

REST Client可以在VScode中模拟请求,只是用于测试。BV1Nb411j7AC

你可能感兴趣的:(前端项目,前端,vue.js,node.js)