Uniapp中vueX实现登录状态功能

2023-11-10

uniapp使用Vuex实现登录状态的判断,退出登录,使用action,commit实现登录功能

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    userid:'',
    username: '',
    realname: '',
    welcome: '',
    avatar: ''
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, { username, realname, welcome }) => {
      state.username = username
      state.realname = realname
      state.welcome = welcome
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    }
  },
  actions: {
    // 登录
    mLogin({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
       api.login(userInfo).then(response => {
          if(response.data.code ==200){ 
            const result = response.data.result
            const userInfo = result.userInfo
			uni.setStorageSync(ACCESS_TOKEN,result.token);
			uni.setStorageSync(USER_INFO,userInfo);
            commit('SET_TOKEN', result.token)
            commit('SET_AVATAR', userInfo.avatar)
            commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname})
            resolve(response)
          }else{
            resolve(response)
          }
        }).catch(error => {
			console.log("catch===>response",response)
          reject(error)
        })
      })
    },
    //手机号登录
    PhoneLogin({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        api.phoneNoLogin(userInfo).then(response => {
          if(response.data.code ==200){
            const result = response.data.result
            const userInfo = result.userInfo
			uni.setStorageSync(ACCESS_TOKEN,result.token);
			uni.setStorageSync(USER_INFO,userInfo);
            commit('SET_TOKEN', result.token)
            commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname})
            commit('SET_AVATAR', userInfo.avatar)
            resolve(response)
          }else{
            reject(response)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    Logout({ commit, state }) {
      return new Promise((resolve) => {
        let logoutToken = state.token;
        commit('SET_TOKEN', '')
        uni.removeStorageSync(ACCESS_TOKEN)
        api.logout(logoutToken).then(() => {
          resolve()
        }).catch(() => {
          resolve()
        })
      })
    },

  },
  getters:{
    token: state => state.token,
	username: state => {state.userid=uni.getStorageSync(USER_INFO).username; return state.username},
	nickname: state => {state.userid=uni.getStorageSync(USER_INFO).realname; return state.user.realname},
	avatar: state => {state.userid=uni.getStorageSync(USER_INFO).avatar; return state.user.avatar},
	userid:state => {state.userid=uni.getStorageSync(USER_INFO).id; return state.userid},
  }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Uniapp中vueX实现登录状态功能 的相关文章

  • 在 iPad 上调试 Javascript

    我想知道人们是否找到了任何有用的工具来在未越狱的 iPad 上调试 javascript 这是一款用于工作的 iPad 因此无法越狱 通过一些繁琐的步骤 我已经在 iPad 上运行了 firebug lite 但是我的 javascript
  • 共享工作线程在重新加载页面时终止

    为什么 Shared Worker 在重新加载页面时死掉了 应该是复活了我该如何解决这个问题 重新加载前 重新加载后 在 example com 上按 F5 家长工人 var port new SharedWorker app worker
  • JS 在两个或多个点之间画线

    我需要在两个标签或标签之间画一条线 Example http caitriona github io connect the dots http caitriona github io connect the dots 我需要做这样的事情
  • 如何在单页应用程序中使用 #-URL?

    本文 http danwebb net 2011 5 28 it is about the hashbangs提出了一个非常令人信服的论点 因为 URL 是长期存在的 它们被添加书签并传递 所以它们应该是有意义的 并且使用哈希进行真正的路由
  • Express JS:请求的资源上不存在“Access-Control-Allow-Origin”标头

    我有一个在服务器上运行的 API 和一个连接到它以检索数据的前端客户端 我对跨域问题做了一些研究并使其发挥作用 但我不确定发生了什么变化 我现在在控制台中收到此错误 XMLHttpRequest 无法加载https api mydomain
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • Kendo 刷新 (DropDownList.refresh()) 不起作用错误未定义

    我试图在另一个 DropDownList 更改后刷新下拉列表 但 Refresh 方法未定义错误正在升级 我尝试再次读取数据源 它显示它正在加载 但数据仍然相同 帮助解决这个问题请 Code DropDownList1 change fun
  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值?

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C
  • 如何使用 API 中的数据填充选择的下拉元素 - ReactJS

    我对 React 还很陌生 我正在从 API 获取数据 当我检查控制台日志时可以看到数据 但是我不知道如何使用 map 创建一个新数组 然后选项元素可以使用该数组来显示货币代码 目前它填充下拉列表 但选项元素全部为空 结果显示为 NaN 下
  • Dojo“正在加载”消息

    我是 Dojo 新手 所以我需要一些帮助 我的一些链接需要一段时间 当用户单击时 页面开始加载需要几秒钟 我想添加一条 正在加载 消息 我可以用 旧时尚方式 来做 但我想学习新的 更简单 更智能的 Dojo 方式 具体如何工作现在并不重要
  • 如何更改数据表中标题单元格的内容?

    我正在使用数据表 http datatables net plugin 在我的可排序列上 我想用按钮替换列文本 但是这样做 oSettings aoColumns i nTh text 我可以检索相应列的文本 但是 oSettings ao
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

    我正在使用 Canvas 在 HTML 中使用 如何使用在圆环图中添加文本 这是我的 javascript 代码和 HTML 代码 我使用了图表js版本3 2 1 所以请给出相同版本 3 的解决方案 var overallStatsCanv
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto
  • 用于替换前 5 个数字的正则表达式,无论它们之间有什么?

    我正在努力实现以下匹配 Input 123 45 6789 123456789 1234 正则表达式尝试输出 d 5 123 45 6789 123456789 1234 d 2 3 123 45 6789 123456789 1234 d

随机推荐

  • crowhuman和object365比赛里的json、odgt、txt数据解析

    crowhuman annotation val odgt标签解析 import cv2 import json data ID 273278 600e5000db6370fb gtboxes fbox 67 60 333 810 tag
  • 统计字符串中各类字符的个数

    题目 输入一行字符 分别统计出其中英文字母 数字 空格和其他字符的个数 输入 一行字符 输出 统计每种字符的个数值 样例输入 aklsjflj123 sadf918u324 asdf91u32oasdf 123 样例输出 23 16 2 4
  • ZYNQ 使用AXI_BRAM实现PS与PL 数据交互数据交互

    一 BRAM IP核介绍 总线是一组传输通道 是各种逻辑器件构成的传输数据的通道 接口是一种连接标准 又常被称为物理接口 协议是数据传输的规则 PS与PL连接方式主要是通过AXI总线进行的 ZYNQ上的总线协议有AXI4 AXI4 Lite
  • 拼多多服务器请求失败在手机上如何修复,拼多多登录不了怎么办?怎么解决?...

    其实很多人不知道 其实是可以在拼多多开店的 不仅可以拼团购物 也可以开店卖自己想卖的商品 不过拼多多平台服务器经常不太稳定 大家时常会碰见拼多多后台打不开 账号登录不了等情况 今天疯狂易购网小编就为大家介绍解决办法 一 拼多多后台打不开怎么
  • qt程序使用tcp连接,客户端退出后,再次重连服务器,一直出现close_wait状态,且无法再连接上

    百度了tcp的各个状态 看到了 CLOSE WAIT状态的原因与解决方法 转载留自己看 编程小生的专栏 CSDN博客 close wait 里面说的close wait的现象 主要原因是某种情况下对方关闭了socket链接 但是我方忙与读或
  • 深度学习实现缺陷检测

    深度学习实现缺陷检测 在工业生产过程中 缺陷检测是一个重要的环节 传统的缺陷检测方法通常依赖于人工提取特征和设计分类器 这种方式需要大量的人力和时间 并且对于复杂的缺陷类型可能不够有效 而深度学习技术通过利用神经网络自动学习特征和进行分类
  • Authing 正式发布应用集成网关 - Authing Gateway

    2023 年 2月 Authing 推出了身份领域的 PaaS化应用集成网关 Authing Gateway Authing Gateway 提供将原有应用快速集成到 Authing 身份云产品的能力 在扩充身份认证方式的同时 提高资源的安
  • 【OSGI】Error osgi xx Invalid value for DynamicImport-Package dynamic.import.pack

    1 背景 git下载项目 siddhi test suite 然后运行里面的测试类报错 Error osgi siddhi test suite Invalid value for DynamicImport Package dynamic
  • 计算机组成原理——存储器(一)

    存储器 一 一 存储器概述 二 存储器的分级结构 三 主存储器的技术指标 四 存储器与CPU的联系 地址总线 CPU与存储器的联系 编址方式 1 按字编址 M N 方式 2 按字节编址 五 SRAM存储器 cache 1 存储元基本结构 2
  • vue-element-admin 后台管理系统

    文章目录 前言 一 vue element admin 是什么 二 使用步骤 下载和部署 浏览模板项目代码 官网 启动 三 技术提炼 1 vue全家桶都有什么 2 vuex 什么时候用文件 什么时候直接写vue页面 导航守卫 3 组件之间的
  • 机器学习期末考试

    机器学习期末考试 一 机器学习链接 1 机器学习期末复习试卷 zhouyan2000的博客 CSDN博客 机器学习期末考试 2 机器学习笔试题 4条消息 机器学习笔试题目 北冥有小鱼 CSDN博客 机器学习题目 3 机器学习面试题 4 一天
  • 【Kubernetes理论篇】Kubernetes核心组件及资源介绍

    文章目录 一 Kubernetes架构 二 Kubernetes核心组件 三 Kubernetes核心资源 四 拓展 1 Service和Ingress的区别是什么 2 Replicaset和Deployment的区别是什么 3 Deplo
  • Flink 错误:找不到参数 evidence$ 的隐式值:TypeInformation 大数据

    Flink 是一个流处理和批处理框架 被广泛应用于大数据领域 在使用 Flink 进行开发时 有时会遇到各种各样的错误和异常 本文将详细介绍一种常见的错误情况 即在 Flink 中遇到的 No implicits found for par
  • Pycharm最新版如何设置自动换行

    1 代码编辑区自动换行 对所有文件有效 1 File gt Settings gt Editor gt General 2 找到Soft Wraps 勾选Soft wrap files 3 在输入框中添加 py 如下图所示 2 在图示位置点
  • 使用python和pyqt5轻松上手人脸识别系统(含代码)

    使用python和pyqt5轻松上手人脸识别系统 含代码 一 环境配置 1 1 python环境配置 1 1 1 安装 anaconda 1 1 2 安装pycharm 1 1 3 配置pip源 1 2 mysql数据库安装 1 3 相关依
  • Windows下,Eclipse的Android NDK(r8e) 配置

    一 关于NDK Android NDK全称 Native Development Kit 即本地开发包 1 NDK是一系列工具的集合 NDK提供了一系列的工具 这些工具对开发者的帮助是巨大的 它们能帮助开发者快速开发C 或C 的动态库 并能
  • windows怎么部署项目到云服务器

    要将项目部署到云服务器 可以按照以下步骤进行操作 1 在云服务提供商上创建一个云服务器实例 并确保已经将其配置和启动 2 在本地开发环境中将项目打包成可执行文件或者jar包 并确保项目能够正确运行 3 使用远程连接工具 如SSH RDP等
  • ctfshow萌新web17

    c传参过滤掉php 思路 include文件包含 利用日志文件包含 访问日志文件 c var log nginx access log 发现日志文件记录了user agent头 于是在该头中插入一句话木马 再访问日志文件 看日
  • AMBA总线协议AHB、APB、AXI对比分析

    一 AMBA概述 AMBA Advanced Microcontroller Bus Architecture 高级处理器总线架构 AHB Advanced High performance Bus 高级高性能总线 ASB Advanced
  • Uniapp中vueX实现登录状态功能

    uniapp使用Vuex实现登录状态的判断 退出登录 使用action commit实现登录功能 Vue use Vuex export default new Vuex Store state token userid username