一看就会的vuex实现登录验证（附案例）

一、vuex是啥？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说，Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。

当你打算开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。

遇到以上情况时候，你就应该考虑使用Vuex了，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。

vuex大体分为如下几部分：

  • state 用来数据共享数据存储
  • mutation 用来注册改变数据状态
  • getters 用来对共享数据进行过滤操作
  • action 解决异步改变共享数据
  • modules：store的子模块，为了开发大型项目，方便状态管理而使用的

二、vuex使用

1.首先创建一个vue-cli项目,这里不详述。

vue init webpack mylogin

2.安装vuex:

npm install vuex --save

3.在src目录下新建文件夹store,用来存放vuex内容

目录结构如下：

4.在main.js中引入vuex

import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)

5.在store文件夹下新建state.js,vuex用来存储数据
内容如下：

const state={
 userInfo:''
}
export default state;

userInfo用来保存用户信息，根据是否有值来判断跳转页面。

6.在store文件夹下新建multation.js,用来修改vuex中存储的数据
内容如下：

const mutations={
 login(state,v){
  state.userInfo=v;
 }
}
export default mutations;

7.在store文件夹下新建index.js,用来初始化vuex
内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './multation'

Vue.use(Vuex);
const store =new Vuex.Store({
 state,
 mutations
})
export default store;

此时在浏览器中就可以看到如下（浏览器需增加插件vue devTools）：

8.本项目界面如下

主页面和登陆页面

9.login.vue提交方法如下：

submitBtn(){
 let me=this;
 if(!me.user.username||!me.user.pwd){
  alert("用户名或密码不能为空");
 }
 else {
  this.$store.commit('login',this.user);
  this.$router.push('./');
 }
}

通过commit实现执行multations里刚才定义的login方法。即当点击登陆时state中的userInfo已经被赋值。接下来通过判断此字段是否有值来进行页面跳转。

10.在main.js用router.beforeEach方法对vuex中的userInfo进行判断

router.beforeEach(function(to,from,next){
 if(store.state.userInfo||to.path==='/login'){
  next();
 }
 else {
  next({path:'/login'})
 }
})

效果图：

登陆后：

案例地址：https://github.com/myweiwei/vuex-login

将不断更新完善，期待您的批评指正！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex + axios 做登录验证 并且保存登录状态的实例

    还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊 第一步:安装axios .vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了 第二步:配置main.js文件 上图不上码,菊花万人捅,附上代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.

  • vue router+vuex实现首页登录验证判断逻辑

    首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

  • 一看就会的vuex实现登录验证（附案例）

    一看就会的vuex实现登录验证（附案例）

    一.vuex是啥? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说,Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态. 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理.这样不管你在何处改变状

  • Go语言实现登录验证代码案例

    Go语言实现登录验证代码案例

    用Go语言实现登录验证,有3次机会,如果用户名为 zhangsan ,密码为 123456 ,则提示登录成功,否则提示还有几次机会,次数用完,提示登录失败.代码如下: package main import "fmt" func main() { var name string var pwd string var loginChance = 3 for i := 1; i <= 3; i++{ fmt.Print("请输入用户名:") fmt.Scanln(

  • 详解Vuex管理登录状态

    详解Vuex管理登录状态

    又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的

  • vuex实现登录状态的存储,未登录状态不允许浏览的方法

    基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • Vue实战之vue登录验证的实现代码

    最近一直在撸一个给大学生新生用的产品,在撸的时候有时候会发现自己力不从心,是不是我的能力下降,是不是我该放弃我的最热爱的事业了?这对我的心灵造成了巨大的伤害,所以我决定向苍老师起誓一定练好我这双手--好好写代码(想多的同学赶紧去面壁5秒钟再过来往下看)--- 我做的这个产品是课堂在线编程教学工具,由于涉及到商业问题,这里就不能和大家分享了,但是我可以把里面我认为很牛(zhuang)X(bi)的技术和大家分享分享啊. 如果你觉得我写的很 low的话欢迎加入igeekbar裙里来喷我啊,我在那里等你

  • PHP通过session id 实现session共享和登录验证的代码

    先说说,这个机制的用途吧,到现在为止战地知道这个机制有两个方面的用途: 首先,多服务器共享session问题,这个大家应该都能够理解的,当一个网站的用户量过大,就会使用服务器集群,例如专门有一个登录用的服务器.用户通过登录服务器登录之后,登录服务器保存了用户的登录信息session,而其他受访问的服务器,例如电影服务器没有这个session,那么我们就要通过一个session的唯一标识来共享这个session了--具体session的共享超出了本文的范围,请自行查阅资料. 第二个用途就是,验证同

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

随机推荐