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 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js中typeof的用法汇总
Dec 12 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JavaScript中的this机制
Jan 30 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Vue项目环境搭建详细总结
Sep 26 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python logging日志模块的详解
2017/10/29 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python中常见错误及解决方法
2020/06/21 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
异步传递消息系统的作用
2016/05/01 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
企业法人代表任命书
2014/06/06 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
上班离岗检讨书
2014/09/10 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
销售工作决心书
2015/02/04 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫