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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
react-router中的属性详解
Jun 01 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 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版 汉字转码的实现详解
2013/06/09 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
实例讲解python函数式编程
2014/06/09 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python使用turtle库绘制树
2018/06/25 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Django进阶之CSRF的解决
2018/08/01 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python实现数值积分方式
2019/11/20 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python 如何实现遗传算法
2020/09/22 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
土建资料员岗位职责
2014/01/04 职场文书
聘用意向书范本
2014/04/01 职场文书
心理咨询承诺书
2014/05/20 职场文书
临床专业自荐信
2014/06/22 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
户外亲子活动总结
2015/05/08 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技