调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面

文件封装

步骤

核心请求文件

在 apiUse 文件夹中的 index.js 文件写 API接口方法

baseURL + url 后台完整地址

将信息写入 store 文件夹中的 index.js 文件
将信息保存到Vuex中，Vuex管理全局共享的数据

①引入接口方法

② state 变量中定义要接收的对象

③ mutations 方法更新信息

④ actions 方法请求用户信息保存到 state变量里userInfo中

⑤ getters 方法定义并导出用户信息

在 router 文件夹中的 index.js 文件中进行 路由守卫

引入 import store from '@/store'

beforeEach 页面发送跳转就走一次，在函数中判断是否已登录 (token) 并获取用户信息=>store.dispatch(‘getUserInfoActions’)

渲染页面

template 中渲染用户信息

script 中引入 mapGetters

最后在 computed 计算属性中使用

调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面相关推荐

把数据保存到cook_将用户信息保存到Cookie中
/** * 把用户保存到Cookie * * @param request * @param response * @param member */ private void rememberPwdA ...
《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
微信开放接口获取用户昵称保存到MySQL中为空白
微信昵称中包含emoji表情标签,某些标签是使用了4字节编码的UTF8. 而大多数MySQL数据库现在使用的是3字节UTF8编码,这样会导致保存为空,且不会提示失败. 解决方法有2个,一个是升级到My ...
微信公众号网页OAuth2.0授权登录并获取用户信息（SpringBoot实现）
微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 文章目录微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 准备工作开发思路具体代 ...
关于网页版微信扫码登录以及获取用户信息
由于我只研究了1天时间,可能有些地方认知错误 1:网页版微信扫码登录的流程 ① 点击扫码登录按钮 ② qrAuthorize(访问微信接口,如果微信接口判断有权限生成二维码的话,跳转到二维码页面.) ...
php把微信一键登录,PHP微信第三方实现一键登录及获取用户信息的方法（实例详解）...
这篇文章主要介绍了PHP版微信第三方实现一键登录及获取用户信息的方法,较为详细的分析了微信第三方登陆的相关注意事项与实现技巧,需要的朋友可以参考下注意,要使用微信在第三方网页登录是需要"服 ...
小程序：登录页获取用户信息并传递用户数据到个人中心页
步骤一:个人中心页添加"立即登录"按钮跳转至登录页一.个人中心页的me.wxml代码 <view class="userinfo"><but ...
小程序：版本更新后获取用户信息变更
小程序:版本更新后获取用户信息变更更新后,以前获取用户信息,是通过wx.getUserInfo,然后就会弹出授权窗口,现在必须通过button ,才能实现: <button open-type ...
解决 {ret:100030,msg:this api without user authorization} android QQ第三发登录成功后获取用户信息失败的问题
在使用QQ第三发登录时,登录成功后,去获取用户信息的时候,却出现这个错误: {"ret":100030,"msg":"this api without ...

调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面

文件封装

步骤

调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面相关推荐

最新文章

热门文章