Uniapp中vueX实现登录状态功能

本文为博客 VIP 文章,开通 VIP 后可阅读全文

开通 VIP

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)
           
Vue3入门笔记----登录功能 通过axios、jwt和vuex实现登录功能 阅读详情

相关推荐

uni-app学习心得——优选商城之用户登录与退出

获取登录信息查询订单状态下面将对这几个功能进行详解。

nyu0815的博客 638

Uni-app登录管理(vuex

应用中,保持登录状态是常见需求,本文讲解使用uni-app框架时如何保持用户登录状态。 即:初次进入应用为未登录状态------->登录---------->关闭应用,再次打开--------->为已登录状态 传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写。因为uni-app框架的主体是 VUE,所以可以使用 vuex 进行登录管理。 关于vuex中定义的全局变量和方法需要定义在指定目录的文件内。 即在...

u012732909的博客 1469

uniapp # 登录功能:接口、安全和登录状态保持

声明:整理和改编、精简自DCloud社区文章,侵删 出处在文末指出。 你是否真的需要登录功能? 用户对你的APP一无所知,你就要求对方注册并登录,除非APP本身已经很有名气或者是用户有强需求,否则正常人应该会直接把它删掉。 比较温和的方式是将一些并不需要登录,但可以给用户带来帮助的东西,第一时间展现给他们,让他们产生兴趣,再在合适的时机引导他们注册(比如使用需要使用更高级的功能,或用户需要收藏某个喜欢的信息时)。 实现登录后的session有几种方式? APP当浏览器用,直接载入远程页面(很难过审,上

skysys的研究小屋 6500

uni-app 保持登录状态Vuex

在小程序中,保持登录状态是很常见的需求,今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的。 一、场景需求 1、场景:初始打开---登陆---关闭,再次打开---(已登录)上次关闭前的页面 2、cookie:传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写。 3、实现:uni-app 的官网的API...

u014321120的博客 2255

uniapp 右上角登录_uni-app 中保持用户登录状态

在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态。简介uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。在 uni-app 进行登录操作时,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验...

weixin_29589063的博客 1686

基于uni-app实现微信小程序一键登录和退出登录功能

目前正在使用uni-app开发一个微信小程序,开发到登录模块时通过查阅uni-app官方教程、微信小程序官方文档、网上的教程终于是实现了微信小程序的登录模块,现总结分享给大家,共同学习...

weixin_57006241的博客 1万+

uniapp 学习笔记二十 用户登录信息存储和跨组件使用

uniapp 学习笔记二十 用户登录信息存储和跨组件使用。

Ggome的博客 2373

uniapp读取mysql_uni-app微信小程序登录demo

calvin008/weixin-login​github.comuni-app微信小程序登录第一章 前端页面1.1 简介前端使用uni-app后端springboot2.X+mybatis plus持久化数据库mysql8.0.161.2 微信小程序登录步骤第一步:小程序通过uni.login()获取code。第二步:小程序通过uni.request()发送code到开发者服务器。第三步:开发者...

weixin_34983902的博客 2381

uni-app中使用vuex管理数据

由于uni-app中已经内置了vuevuex,因此不需要npm下载安装,下面直接说明引入和使用 1.在根目录下创建store目录,并在store目录下创建index.js 2.在store/index.js中写入如下代码 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{//存放状态 "username":"foo",.

Amelian的博客 1689

在uni-app(Vue3)中使用Vuex

Vue3和Vue2在创建和引入Vuex的时候有所不同。碰到的时候报错原因有多种多样,需仔细排查。

weixin_57006241的博客 2443

UNIAPP实战项目笔记54 登录时用state存储用户信息并持久化用户登录和退出登录功能

设置功能里面有退出按钮,通过调用state中的outLogin方法来实现退出功能。common 公共文件:全局css文件 || 全局js文件。pages.json 配置文件: 导航、 tabbar、 路由。manifest.json 配置文件: appid、logo…App.vue 全局配置:样式、全局监视。打开APP自动初始化本地存储数据到state中。登录信息各个页面同步使用的是state。登录信息的持久化使用的是本地存储。components 组件。

Ggome的博客 1899

vue中uni-app 实现小程序登录注册功能

React基础 第一节:简介 1.1 概念 React是用于构建用户界面的JavaScript库(只关注视),起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。 1.2 特点 声明式编程:React 使创建交互式 UI ,当数据变动时 React 能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。 高效:React通过对DO.

aliyun3的博客 2801

uni-app登录代码

<p>uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。在 uni-app 中,可以使用 vuex 和 storage 来实现登录功能。</p> <p>以下是一个简单的登录代码示例:</p> <ol> <li>在 main.js 中引入 vuex 和 storage</li> </ol&gt...

weixin_35755188的博客 412

uniapp pinia安装及使用

uniapp项目中,新一代状态管理插件pinia安装与使用,以及对比vuex

qq_20111965的博客 1万+

vuex引入全局websocket 用作IM即时通讯(基于uniapp开发的微信小程序即时通讯模块)

最近公司开发的项目管理软件需要加入即时通讯功能,后端基于springboot+netty+ws,本人被迫从java开发工程师转型成全栈,如果代码有什么问题欢迎指出 后端功能开发参考了github的开源项目 上链接https://github.com/lmxdawn/him-netty 前端采用uniapp提供的wsAPI,微信小程序或web端实现思路也是一样的 实现ws登录,心跳,断线重连的功...

u013675978的博客 4017

uniapp创建vue3项目

uniapp-VUE3-微信小程序项目

weixin_57844432的博客 1万+

用uni-app开发app应用登陆

后端程序 我使用的是laravel框架作为app的接口,前后端分离就涉及到登陆这个问题了,uni-app不支持读写cookie,所以不能使用cookie来保存登陆状态.后端我使用的是基于OAuth的扩展包Passport扩展包,这里就不细写安装这个扩展包的过程了.详情可以参考学院君的文章. uni-app发送登陆请求 默认的uni-app是一个使用 Vue.js.竟然这里登陆状态没有cookie了...

weixin_34288121的博客 4261
上一篇: uniapp map 制作一个简单的地图导航
下一篇: Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
梅花十三儿
博客等级 码龄5年 1035粉丝 · 444原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值