在actions中和路由守卫中发网络请求的两种步骤

最新推荐文章于 2023-03-22 20:38:15 发布
最新推荐文章于 2023-03-22 20:38:15 发布
阅读量449 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62371650/article/details/127273341
版权

在vuex中的actions中发送请求

模拟一个场景,
用户点击登录按钮,获取的数据存入vuex中

  • 用户点击按钮,提交actions异步更新
  • 在request.js中axios和拦截器,
  • 在api/user.js中封装登录请求
  • 在vuex的actions中调用login
  • commint同步更新state中的数据
    在这里插入图片描述

在路由守卫中发请求

在登录跳转主页的时候,因为有不同的权限管理,所以在进入页面显示的内容也不一样,获取的信息也不一样

  • 登录页点击登录按钮,将token存入vuex
  • 页面跳转会进入路由守卫
  • 在路由守卫中发送请求
  • 获取的数据保存发哦vuex中,跳转目标页面
  • 目标页面获取vuex中的数据
    在这里插入图片描述
史蒂文·月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue中在vuex的actions中请求数据实例
01-19
我废话不多说了，直接上代码吧！ actions.js getCertificationStatus(context, {vm:vm,type:type}){ return new Promise((resolve, reject) => { axios.post('/realNameUtils/gotoStatusPage') .then((res)=>{ context.commit('certificationStatus',res.data.content) if(type=='1'){//个人 }else if(type=
在路由守卫里发ajax请求！（一张图直接看透）
留着鼻涕敲代码
10-17 463
登陆页面发送登录请求后，在登录页面跳转主页时触发路由守卫，然后在路由守卫中发送ajax请求，请求数据成功后，用mutations将数据存入vuex中，再跳转至主页 主页再从vuex中获取数据。
在项目中使用actions发送请求时的流程图
weixin_58384302的博客
10-17 249
当我们需要使用vuex管理请求数据时,一般都是用actions进行请求的发送,然后存放到vuex的state中进行存储,当我们在组件中需要用到这部分的数据时,就可以直接在vuex中进行获取 具体流程图如下所示 ...
路由守卫与请求关系图解!!!(important)
aichixiangcaia的博客
10-17 105
点击了登录按钮之后, 会保存token 进入路由守卫 1 actions --> mutations ---> status在路由守卫中，发ajax请求 发完请求后 服务器响应回来的数据保存到vuex中的state的userinfo:{}中,最后根据获取的信息渲染页面 ...
Vue中actions与dispatch的网络请求简单使用
abc_xian的博客
03-22 238
Vue中actions与dispatch的网络请求简单使用
actions-sync:我在存储库中的GitHub操作
03-15
管理跨多个项目的所有GitHub Actions工作流。 与所有项目同步。 将更改应用于所有项目中的相似工作流。设置从此模板创建一个存储库，不要选中“包括所有分支”。 您可以将此存储库公开，也可以将其保密。 创建一个...
setup-tectonic:在GitHub Actions工作流程中设置Tectonic
04-01
wtfjoke/setup-tectonic操作是一个JavaScript操作，可通过以下方式在GitHub Actions工作流程中设置Tectonic： 下载所需的Tectonic版本并将其添加到PATH 。 （可选）下载所需的Biber版本并将其添加到PATH 。 :...
actions-set-secret:在github仓库中创建或更新秘密
05-23
设定秘密动作在存储库或组织中创建或编辑动作机密用法输入项名称必需的String秘密名称。价值要存储的必需String Secret值。代币必需的String存储库资料库要存储的必需的String存储库或组织。 默认的github....
vue路由守卫、vue-ajax请求
m0_59023231的博客
05-14 1196
vue路由守卫、vue中的ajax请求
actions vuex 请求_vuex
weixin_33894125的博客
12-31 264
注：变量用于保存状态的官方解释：vuex是专门为vue.js应用程序开发的状态管理模式。多个组件共享的变量存在vuex中（在这里面管理的变量都是响应式的，也就是js中的data改变会同步到视图当中）然后将这个对象放在顶层的vue实例中，让其它组件可以使用。那么，多个组件（也就是页面）就可以共享这个对象中的所有变量属性了什么样的变量需要我们在多个组件里面共享呢？1、用户登录状态，用户名称，头像，地理...
配置axios发送请求和设置路由守卫控制
lh1234566的博客
10-12 339
配置axios index.js下 在组件中发送请求只需this.$http.post(‘login’,this.loginform); 这里用async/await接收promise对象。 2.设置路由控制守卫 浏览器每次发送请求都会带token，服务端有拦截器判断token正确与否并返回响应。 ...
在路由守卫里面调用actions发送Ajax请求获取用户信息
yezi153的博客
10-16 397
1.先封装api,获取用户信息的api，还要封装获取用户具体信息的api，传递用户id 2.在vuex里面定义actions，发送Ajax请求 3.在登录跳转到首页之前，调用vuex里面定义的actions发送Ajax请求，注意要加模块名，否则会报错，命名空间的错误 4.实现登录跳转 5.调用commit把actions拿到的数据(把两次拿到的数据合并为一个对象，作为参数传递)再修改保存到state里面 6.直接在组件里面拿state里面的数据 ...
vue路由守卫，判断登录等相关接口
qq_38618788的博客
06-25 1084
vue路由守卫 一、全局路由守卫 //全局守卫写在main中 //router对象调用 //.beforeEach((进入到哪一个路由,从哪一个路由离开,对应的函数)=>{}) router.beforeEach((to,form,next) =>{ //如果进入到的路由是登录页或者注册页面，则正常展示 if(to.path == '/login' || to.path == '/register' ){ next(); }else if(
在路由守卫发送请求的工作流程图
m0_52765288的博客
10-17 210
vuex 在 mutations里面发请求与actions里面发请求的区别
weixin_44832362的博客
12-23 259
vuex 在 mutations里面发请求与actions里面发请求的区别
vue的路由守卫与axios的请求拦截
wytraining
07-30 766
vue的路由守卫与axios的请求拦截
beforeEach前置路由守卫 vue
qq_40055200的博客
09-03 524
路由守卫：通过这个名词显而易见就类似于古代城池钱士兵看守，你只有士兵认的通行证才能让你进入，如果不符合或者没有那么你无法进入这个城池，这也是为了安全起见。 同样vue中的路由守卫也是一样的，一般用来拦截路由请求。 使用场景： 通常用在登录拦截，可以是全局也可以局部的。 做后台管理系统，会根据不同的用户权限展示不同的内容。 主要思想： 登录成功的时候存一个状态，可以放在localStorage/sessionStorage/store任意一个都可以 然后通过路由钩子判断一下，符合条件可以进入系统.
路由懒加载及路由守卫
yueye_wu的博客
09-23 239
路由懒加载及路由守卫
vue2在vuex中动态添加路由
最新发布
03-29
在Vuex中添加路由，需要先在router/index.js中定义一个空的路由，然后在Vuex中动态添加路由。 1. 在router/index.js中定义一个空的路由： ``` const router = new VueRouter({ routes: [] }) ``` 2. 在Vuex的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

史蒂文·月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值