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 相关文章推荐
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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的几个常用数字判断函数代码
2012/04/24 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
面试常见的js算法题
2017/03/23 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python获取远程图片大小和尺寸的方法
2015/03/26 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python中反射和描述器总结
2018/09/23 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python+opencv实现阈值分割
2018/12/26 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
社区七一党员活动方案
2014/01/25 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书