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


Posted in Javascript onSeptember 16, 2018

还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊

第一步:安装axios 、vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了

第二步:配置main.js文件

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

上图不上码,菊花万人捅,附上代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import locale from 'iview/dist/locale/en-US';
import VueParticles from 'vue-particles';
import axios from 'axios' ;
import Vuex from 'vuex' //引入状态管理
 
Vue.use(VueParticles) ;
Vue.use(iView, { locale });
Vue.config.productionTip = false ;
Vue.prototype.$http = axios ;
Vue.use(Vuex) ;
 
 
const ADD_COUNT = 'ADD_COUNT'; // 用常量代替事件类型,使得代码更清晰
const REMOVE_COUNT = 'REMOVE_COUNT';
//注册状态管理全局参数
var store = new Vuex.Store({
 state:{
 token:'',
 userID:'',
 },
 mutations: {
 //写法与getters相类似
 //组件想要对于vuex 中的数据进行的处理
 //组件中采用this.$store.commit('方法名') 的方式调用,实现充分解耦
 //内部操作必须在此刻完成(同步)
 [ADD_COUNT] (state, token) { // 第一个参数为 state 用于变更状态 登录
  sessionStorage.setItem("token", token);
  state.token = token;
 },
 [REMOVE_COUNT] (state, token) { // 退出登录
 
  sessionStorage.removeItem("token", token);
 
  state.token = token;
 },
 }
});
 
 
router.beforeEach((to, from, next) => {
 iView.LoadingBar.start();//loadong 效果
 
 store.state.token = sessionStorage.getItem('token');//获取本地存储的token
 
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
 if (store.state.token !== "") { // 通过vuex state获取当前的token是否存
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
})
 
router.afterEach(route => {
 iView.LoadingBar.finish();
});
 
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, //注册组件
 components: { App },
 template: '<App/>'
}) ;

第三步:进行登录 操作,调用main.js 中定义好的修改token的方法[ADD_COUNT]

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

附上请求部分代码

this.$http({
 method: 'get',
 url: '/api/login',
}).then(function(res){
 var json = res.data
 console.log(json.data);
 this.$Message.success('Success!');
 
 this.$store.commit('ADD_COUNT', json.data.token);
 
 let clock = window.setInterval(() => {
 this.totalTime-- ;
 if (this.totalTime < 0) {
  window.clearInterval(clock) ;
  this.$Loading.finish();
  this.$router.push('/') ;
 }
 },1000)
}.bind(this)).catch(function(err){
 this.$Message.error('登录失败,错误:'+ err);
 this.$Loading.error();
}.bind(this))

差点忘记了一点,在router中要配置需要验证是否登录的请求

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

附上router/index.js 代码

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login/Login'
import P404 from '@/components/404/404'
import Main from '@/components/Main'
 
Vue.use(Router)
 
export default new Router({
 mode: 'history',
 routes: [
 {
  path: '/login',//登录页
  name: 'Login',
  component: Login
 },
 {
  path: '/',//首页
  name: 'Main',
  component: Main,
  meta: {
  requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
  },
 },
 { path: '*', component: P404 } //这里是保证错误地址会跳转到404界面进行提示
 ]
})

这些方法的编写顺序可能没有体现出来,不过最终效果就是这个了,如果有疑问欢迎留言。

以上这篇vuex + axios 做登录验证 并且保存登录状态的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 #Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 #Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 #Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 #Javascript
vue debug 二种方法
Sep 16 #Javascript
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
探讨如何把session存入数据库
2013/06/07 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
Vuex 入门教程
2018/01/10 Javascript
js的对象与函数详解
2019/01/21 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
jquery添加div实现消息聊天框
2020/02/08 jQuery
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python函数调用追踪实现代码
2020/11/27 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
Python 中Operator模块的使用
2021/01/30 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
用Python写一个for循环的例子
2016/07/19 面试题
高中生家长寄语大全
2014/04/03 职场文书
应急管理培训方案
2014/06/12 职场文书
贷款委托书
2014/08/01 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python