vuex的使用

最新推荐文章于 2023-11-29 07:00:00 发布

天空之枫

最新推荐文章于 2023-11-29 07:00:00 发布

阅读量148

点赞数

分类专栏： vue iview

本文链接：https://blog.csdn.net/sinat_24713805/article/details/105222839

版权

vue 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

iview

15 篇文章 0 订阅

订阅专栏

学习vuex，本文以token存储为例，有错误的地方请指正。

在login.vue页，通过发送http请求获取token

util.post(url, {username:username,password:password}).then(body => {
     if (body && body.success) {
         this.$message.success('登录成功');
         let data = body.data;
         //存入token
         this.$store.commit('setToken',data.token);
         if(store.state.token){
            this.$router.push({ 
                path: "/home"
            });
         }else{
            this.$router.push({ 
                path: "/login"
            });
         }
      }else{
          this.$Message.error({content: data.msg})
      }
}).catch((e)=>{
    this.$Message.error({content: "登录错误" + e});
})

在store.js中对token进行处理

import Vue from 'vue';
import Vuex from 'vuex'
import Cookies from 'js-cookie';

Vue.use(Vuex)


const user = new Vuex.Store({
   state:{
      token:''
   }
   mutations: {
     setToken:function(state, token) {
       state.token = token;
       //将token存入cookie
        Cookies.set('TOKEN',token);
     },
     delToken:function(state){
       state.token = '';
       //将token从cookie中删除
       Cookies.remove('TOKEN');
      }
   }
})

export default user;

在router/index.js中

//刷新页面，重新获取token
if(Cookies.get('TOKEN')){
    store.commit('seToken', Cookies.get('TOKEN'));
}

router.beforeEach((to, from, next) => {
    if(to.meta.auth === false){
        //无需登录
        next();
    }else if(!Cookies.get('TOKEN')){
        next({
            path: 'login'
        });
    }else{
        next({
            path: 'home'
        });
    }

})

在main.js中定义全局

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

在请求拦截

import store from '@/store/index';

// 请求拦截器
axios.interceptors.request.use(    
    config => {        
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;
    },
    error => {
        return Promise.error(error);    
})