vuex + axios 做登录验证 并且保存登录状态的实例

还是那句话，网上找个完整的博客真的难，实现效果全靠摸索啊

第一步：安装axios 、vuex npm i -s axios npm i -s vuex 执行这两句 ，vue等环境搭建就不废话了

第二步：配置main.js文件

上图不上码，菊花万人捅，附上代码

// 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]

附上请求部分代码

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中要配置需要验证是否登录的请求

附上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 做登录验证 并且保存登录状态的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。