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 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php实现的MySQL通用查询程序
2007/03/11 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
php微信开发之图片回复功能
2018/06/14 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
传智播客学习之java 反射
2009/11/22 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
vue组件间通信解析
2017/03/01 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
安全生产月活动总结
2014/05/04 职场文书
青春无悔演讲稿
2014/05/08 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
实习单位指导教师评语
2014/12/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
js之ajax文件上传
2021/05/13 Javascript
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS