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的模态div层弹出效果
Aug 21 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
Vue-cli3多页面配置详解
Mar 22 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 实用代码收集
2010/01/22 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python去掉空白行的多种实现代码
2018/03/19 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python字符串反转的四种方法详解
2019/12/02 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python动态文本进度条的实例代码
2020/01/22 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
.NET面试问题集
2015/12/08 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
洗发水广告词
2014/03/13 职场文书
大学生励志演讲稿
2014/04/25 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
交通事故责任认定书
2015/08/06 职场文书
2016年教师新年寄语
2015/08/18 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python