vuex+localStorage實現登陸狀態保持

項目根目錄package.json中加入依賴，然后cnpm install

目錄結構

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/store'
Vue.use(ElementUI);
Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.http.get('http://192.168.10.128:8000/api/login').then(response => {});
let djangocookie=getCookie('csrftoken');
Vue.http.headers.common['X-CSRFToken'] = djangocookie;//這里設置請求頭
router.beforeEach((to, from, next) => {    //未登陸攔截
if (to.path === '/login') {
    next()
  } else {
    if (!store.state.user ) {
      next({ path: '/login' })
    } else {
      next()
    }
  }
});
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});
function getCookie(name){  //獲取cookie函數
    name = name + "=";
    let start = document.cookie.indexOf(name),
        value = null;
    if(start>-1){
        let end = document.cookie.indexOf(";",start);
        if(end === -1){
            end = document.cookie.length;
        }
        value = document.cookie.substring(start+name.length,end);
    }
    return value;
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default  new Vuex.Store({
  state: JSON.parse(localStorage.getItem('user')) || {},
  mutations: {
    Login(state, user) {
      localStorage.setItem('user', JSON.stringify(user));
      Object.assign(state, user)
    },
    Logout(state) {
      localStorage.removeItem('user');
      Object.keys(state).forEach(k => Vue.delete(state, k))
    }
  },
  actions: {
    login({commit}, user) {
      commit("Login", user)
    },
    logout({commit}) {
      commit("Logout")
    }
  }
})

login.vue

<template>
  <div class="main">
    <div class="login">
    <h1>應用管理系統</h1>
      <div class="inset"  >
  <el-form class="el-form" ref="form" >
      <h2>管理登錄</h2>
    <el-form-item label="用戶"  prop="name">
        <el-input type="text" auto-complete="off" class=input_text v-model="authInfo.username" placeholder="請輸入用戶名"></el-input>
    </el-form-item>
    <el-form-item label="密碼"  prop="password">
        <el-input type="password"  class=input_text auto-complete="off" v-model="authInfo.password" placeholder="請輸入密碼"></el-input>
    </el-form-item>
    <el-form-item>
      <div class="sign">
        <!-- 點擊進行登錄提交 -->
        <el-button  class="submit" type="primary" @click="submit" >登錄</el-button>
        <div style="color: red">{{req.msg}}</div>
        <!-- 點擊重置表單 -->
    </div>
    </el-form-item>
</el-form>
    </div>
</div>
    </div>
</template>
<script>
  import { mapActions } from 'vuex'
//  import { USER_SIGNIN } from '../store/store'
  import crypto from 'crypto'
  export default {
    data() {
      return {
        DjangoCookie:null,
        books: [],
        authInfo: {
          username: null,
          password: null
        },
        req: {
          msg: null,
        },
        form: {
          user: null
        }
      }
    },
    methods: {
      ...mapActions(["login"]),
      getmd5(pwd) {
        let md5 = crypto.createHash("md5");
        md5.update(pwd);
        let a = md5.digest('hex');
        return a
      },
      submit: function () {
        let pwd = this.authInfo.password;
        this.authInfo.password = this.getmd5(pwd);
        let formData = JSON.stringify(this.authInfo); // 這里才是你的表單數據
        this.$http.post('http://192.168.10.128:8000/api/login', formData).then((response) => {
          // success callback
          this.req.msg = response.data.msg;
          this.req.respCode = response.data['resp_code'];
          if (this.req.respCode === "0000") {
            this.form.user = response.data.username;
            this.$store.dispatch("login", this.form); //將user保存到store
            this.$router.push({path: '/manage'});
          }
        }, (response) => {
//               console.log("error");
          // error callback
        });
      },

    },
  }
  function getCookie(name){  //獲取cookie函數
    name = name + "=";
    let start = document.cookie.indexOf(name),
        value = null;
    if(start>-1){
        let end = document.cookie.indexOf(";",start);
        if(end === -1){
            end = document.cookie.length;
        }
        value = document.cookie.substring(start+name.length,end);
    }
    return value;
}
</script>

manage.vue 退出

<template>
  <div>
    <el-menu
      router
      default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="/manage/javamanage">java應用</el-menu-item>
      <el-menu-item index="/manage/jenkinsmanage" >jekins</el-menu-item>
      <el-menu-item index="" class="floatR" @click="loginOut">注銷</el-menu-item>
      <el-menu-item  index="" class="floatR">{{user}}</el-menu-item>
    </el-menu>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<style>
  .floatR{
    float: right !important;
}
</style>
<script>
  import { mapState } from 'vuex'
  export default {
//    data() {
//      return {
//        activeIndex: '1',
//        activeIndex2: '1'
//      }
    computed: mapState({ user: state => state.user }),
    data(){
    return{
      userName: sessionStorage.userName
    }
  },
  methods:{
    loginOut() {
  this.$confirm('您確定要退出嗎?', '退出管理平台', {
   confirmButtonText: '確定',
   cancelButtonText: '取消'
  }).then(() => {
   const info = {
    'user': sessionStorage.getItem('user')
   };
   this.$store.dispatch('logout', info).then(() => {
    this.$router.push({ path: '/login' })
   }).catch(() => {
   })
  }).catch(() => {

  })
 }

  }
  }
</script>