Vue实现登陆时token存放到Vuex

一、Vue实现登陆时token存放到Vuex

1.登录页面

<template>
    <div>
        <h1>登录</h1>
        {{ $store.state.token }}
        <el-form ref="form" :rules="rules"  :model="form" label-width="80px">
            <el-form-item label="账号" prop="username">
                <el-input v-model.trim="form.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
       </el-form>
    </div>
</template>

<script>
    export default {
        methods:{
            onSubmit(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('setTokenAsync',this.form);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        data(){
            return {
                form:{},
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                 }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

 

2.store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import  {login} from '@/api/login'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token:''
  },
  getters: {
  },
  mutations: {
    setToken(state,token){
       state.token=token;
    }
  },
  actions: {
    // context：就是外部文件文件中使用的 this.$store
    // {commit}=context,要使用context中的属性，将要使用的属性解构出来
    setTokenAsync({commit},form){
      login(form).then(res=>{ 
          commit('setToken',res.token);
      }).catch(err=>{
          console.log("err:",err);
      })
    }
  }
})

 

 3.api/login.js

import  request  from '@/utils/request';
import qs from 'qs';

export function login(data){
  return  request({
        url:"/api/login.php",
        method:'post',
        data: qs.stringify(data)
    })
}

 

4.utils/request.js

import axios from "axios";
import { Message } from 'element-ui';

// export 可以有无数个
export  const API_URL='http://www.ggqadminapi.com'

// 创建实例时设置配置的默认值
var instance = axios.create({
    baseURL: API_URL
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    console.log(response);
    let res=response.data;
    if(res.code!=0){
        Message.error(res.message);
        return Promise.reject(res.message);
    }
    // 对响应数据做点什么
    return res;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

//export defaulf 默认导出，一个页面只能有一个
export default instance;

 

 

5.效果实现