完整的登录获取token和封装axios请求

VIP文章 已于 2022-11-22 09:19:20 修改
阅读量3.3k 收藏 24
点赞数 2
分类专栏： 前端开发技术 文章标签： 前端 javascript 大数据
于 2022-07-28 10:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liu_JiaqiPro/article/details/125657700
版权

步骤：登录调后端接口获取token存在vuex和缓存里-->设置路由守卫判断路由-->封装axios请求插入token-->调用接口

1.登录

页面代码不展示了

data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
        }
    },
    mounted() {

    },
    methods: {
        ...mapMutations(['changeLogin']),
        login() {
            let _this = this;
            if (this.loginForm.username === '' || this.loginForm.password === '') {
                this.$toast({
                    message: '请先正确输入手机号和密码',
                });
            } else {
                this.axios({
                    method: 'post',
                    url: '', // 登录接口
                    data: _this.loginForm
                }).then(res => {
                    _this.userToken = ""; //res后端返回的token
                    /
最低0.47元/天 解锁文章
Artsman
关注
  • 2
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+ts+axios+pinia动态路由
weixin_43828003的博客
01-30 559
关于vue3、ts、axios、pinia形成动态路由
Vue封装Axios请求和拦截器的步骤
01-18
PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vue create my-project 　　axios 是一个基于 promise 的 http 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库。 　　axios很好用，其中之一就是它的拦截器十分强大，我们可以为请求和响应设置拦截器，比如请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。 　　之前初学的时候，经常将axios数据请求写在各组件方法内，但实践证明，如果项目接口变动要修改url地址等参
vue3 使用pinia存储用户信息、axios拦截请求添加token、用户权限约束操作方法
最新发布
Zwain_M的博客
03-14 1201
【代码】vue3 使用pinia存储用户信息、axios拦截请求添加token、用户权限约束操作方法。
vue中封装axios的方法以及如何使用
01-03
封装axios 在vue中常用的请求方式就是axios，下面讲解axios的封装方式 第一步，需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步，定义新的axios let instance = axios.create({ timeout:10000,//请求时间超过10000ms就中断 baseURL:'/api', }) 注意：这里可将baseURL放入其中，便于代码的统一，也可将其放入main文件中 第三步，设置请求拦截 instanc
Vue项目中如何使用Axios封装http请求详解
12-13
前言 使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。 下载源码 安装 npm install axios --save 建立http.js文件 在/src/utils/目录下建立一个htttp.js 1.首先导入axios和router。 import axios from 'axios'; import router from '../router'; 2.接着设置axios请求参数。 axios.defaults.timeout = 5000; //请
封装axios拦截重复请求
01-20
偷个懒 用下别人的代码 原帖 （侵删） 文中稍作修改 功能不变 新建一个请求文件 import axios from 'axios' //取消请求 let CancelToken = axios.CancelToken //设置默认请求头，如果每次请求都携带token 建议写在这里 axios.defaults.headers = { } // 请求超时的时间限制 axios.defaults.timeout = 20000 // 开始设置请求 config 代表发起请求的参数的实体 axios.interceptors.request.use(config => { // 得到参数
vue——接口修改请求头——有些接口不需要请求头传递token——基础积累
yehaocheng520的博客
07-07 1299
vue——接口修改请求头——有些接口不需要请求头传递token——基础积累
Vue2+axios封装，实现用户token登录管理
qq_45292334的博客
05-27 2425
Vue2+axios 封装，实现用户token登录管理 一个小项目，用户登录生成token，并放在请求头中带给后台做验证，token到期或者错误时将用户踢下线 1.新建一个文件m_api.js，放入api文件夹中，我项目的src目录如图所示，可用做参照 2. 引入axios，并创建axios实例,代码如下:` // let Base64 = require('js-base64').Base64; import axios from 'axios'; //import Router from 'router
vue封装axios（token）
weixin_62328829的博客
01-14 792
src目录下新建 api 文夹并新建 index.js 文件。main.js中使用。
vue使用 axios添加拦截器，get请求、post 请求头部添加token
热门推荐
Goaread的博客
12-24 1万+
vue使用 axios添加拦截器，get请求、post 请求头部添加token
【Vue3】Axios简易二次封装+token+跨域问题+接口同步调用使用。
Lin_Yu_的博客
11-10 2240
Vue中Axios简易二次封装+token+跨域问题+接口同步调用使用。数据返回promise的情况分析。
Vue axios获取token临时令牌封装案例
11-19
网络请求：Axios;方式：vue add axios 缓存方案 全局变量：Vuex 本地缓存：LocalStorage 技术依赖 你猜？ 背景 公司开发一个嵌入App的Web页面，安全方面使用老套路：App通过URL传参给前端（包含签名），前端把参数透...
HR项目-登录模块-封装登录接口，token,添加token的getters,token就行封装
weixin_55537701的博客
06-22 688
登录模块 登录页面基本布局 **目标**完成登录页面的基础布局 基本布局 <!-- 放置标题图片 @是设置的src目录别名--> <div class="title-container"> <h3 class="title"> <img src="@/assets/common/login-logo.png" alt=""> </h3> </div> 样式处理 /* reset element-ui cs
Pinia---Vue3最新状态管理库
weixin_52053631的博客
07-02 363
Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品。2. 创建一个 pinia 实例 (根 store) 并将其传递给应用。3. 定义store。4. 使用store。
nuxt3 localStorage问题(持久化存储token)
m0_61846967的博客
09-01 2162
第一次使用nuxt3移植之前的项目时遇到了问题，在登录功能时需要使用token，在CLI中可以使用localStorage来解决，但是如果在nuxt3中使用，会直接报错500，localStorage not definded，在尝试了许多方法都无效后，最终解决，分享自己的解决方法。前端新手，希望多多包涵。
nuxt+express 构建前后端分离项目中 使用token与中间件middleware
weixin_43161796的博客
07-15 875
一定要考虑middlware同时与服务端和浏览器交互！！！ middlware中间件代码 import axios from 'axios' import getCookie from '~/uitls/getCookie' export default async function ({ app , req , redirect , route }){ let token ; if(req) { //req只有在服务端会触发 //当用户第一次进入页面时，会先触发服务端，继续访问其他页面，
使用pinia存储token和token解析的内容
极客神殿
09-07 528
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。注意：可以通过vue的开发者工具dev-tools在浏览器的控制台查看 存储的内容。//watchEffect页面一刷新，方法立即被调用。// 页面刷新，vuex中存储的状态依然存在。//watchEffect一进来就触发。
Vue项目实战中token和axios的二次封装使用，一起来写出优雅的项目结构
weixin_45745641的博客
01-14 1915
前言 token通常在管理系统中用来进行身份和权限验证，大家应该都不陌生，这篇文章教大家对token和axios进行封装，保持项目结构良好的可读性，对token比较陌生的同学，那就赶紧学起来吧~ 什么是token token是对用户进行登录验证的一串密钥，它由后端生成，一般前端进行登录验证通过后就会得到后端返回过来的token，后期的一些操作请求也需要携带token来保证接口安全 token身份验证的过程 前端发送登录请求 请求成功，拿到token，存入本地localstorage中 发送请求携带toke
Vue实现登录功能详解，前期配置（整合）（处理token，vuex配置，axios配置，router配置等）
m0_61663332的博客
01-13 5333
Vue实现登录功能详解，前期配置。后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token；前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败
vue的封装axios获取token
05-23
在 Vue 中，可以将 Axios 封装成一个插件，方便在多个组件中使用。下面是一个封装 Axios 并获取 token 的示例： 1. 创建一个 axios.js 文件 在 src 目录下创建一个 axios.js 文件，用于封装 Axios。 ```javascript import axios from "axios"; const instance = axios.create({ baseURL: "http://your-api-url.com", timeout: 10000 }); // 请求拦截器 instance.interceptors.request.use( function(config) { // 在请求发送之前做一些处理，比如加入 token const token = localStorage.getItem("token"); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, function(error) { // 对请求错误做些什么 return Promise.reject(error); } ); export default instance; ``` 2. 创建一个 axios 插件 在 plugins 目录下创建一个 axios.js 文件，用于将 Axios 注册为 Vue 插件。 ```javascript import axios from "@/axios"; const AxiosPlugin = { install(Vue) { Vue.prototype.$http = axios; } }; export default AxiosPlugin; ``` 3. 在 main.js 中注册插件 在 main.js 中引入并注册 Axios 插件。 ```javascript import AxiosPlugin from "@/plugins/axios"; Vue.use(AxiosPlugin); ``` 现在，在 Vue 组件中可以直接使用 this.$http 发送请求，并且会自动带上 token。例如： ```javascript methods: { async getUserInfo() { try { const response = await this.$http.get("/user/info"); console.log(response.data); } catch (error) { console.log(error); } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值