登录接口取到token,加到请求头中,通过服务器验证#Vue3

登录接口取到token,加到请求头中,通过服务器验证#Vue3

Token验证的基本流程

1.服务端收到请求,去验证用户名与密码

2.验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端

3.客户端收到 Token 以后可以把它存储起来,比如放在 Cookie 里或者 Local Storage 里

4.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

5.服务端收到请求,然后去验证客户端请求里面带着的 Token,如果验证成功,就向客户端返回请求的数据

感觉这篇文章关于token的流程讲的很形象,可以看看

一、在登录页面中,在浏览器中缓存token值

bash 复制代码
 <!-- Login.vue -->
// 登陆(接口)
const login = async () => {
  await axios
    .post("http://192.168.1.214:5050/api/Login/GetToken", form.value)
    .then((res: any) => {
      console.log(res.data.status);
      if (res.data.status === 200) {
        alert("登录成功!");
        // 缓存token值在浏览器
        localStorage.setItem("token", res.data.data.token);
        // 跳转页面
        router.push("/home");
      } else {
        alert("登录名或密码错误,请重新登录!");
        router.push("/");
      }
    })
    .catch((error: any) => {
      console.log(error.data.msg);
    });
};

二、在接口请求服务器之前,在请求头添加token验证身份

bash 复制代码
 <!-- request.ts -->
import axios  from 'axios'

	//请求拦截
  axios.interceptors.request.use(function(config){
    config.headers.Authorization = 'Bearer ' + window.localStorage.getItem('token')
    //建议还是使用localStorage,localStorage是永久存储在浏览器中,只要当用户不删除数据,则该数据就会一直存放在localStorage中。
    //sessionStorage是会话级别的存储,从名字session我们就可以看出来了,也就是当用户关闭浏览器,此时数据就会被销毁。
    return config;
  },function (error){
    return Promise.reject(error)
  })

  // 响应拦截
  axios.interceptors.response.use(function(response){
    return response
  },function(error){
    return Promise.reject(error)
  })
相关推荐
lyj1689979 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
计算机毕设定制辅导-无忧学长1 小时前
西门子 PLC 与 Modbus 集成:S7-1500 RTU/TCP 配置指南(一)
服务器·数据库·tcp/ip
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密