import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 用Vuex.Store對(duì)象用來記錄token
const store = new Vuex.Store({
  state: {
    // 存儲(chǔ)token
    token:"",
    userName:"" // 可選
  },
  getters: {
	getToken(state){
		return state.token || localStorage.getItem("token") || "";
	}
  },
  mutations: {
    // 修改token，并將token存入localStorage
    setToken(state,token) {
      state.token = token;
      localStorage.setItem('token', token);
      console.log('store、localstorage保存token成功！');
    },
    delToken(state) {
      state.token = "";
      localStorage.removeItem("token");
    },
    // 可選
    setUserInfo(state, userName) {
      state.userName = userName;
    }
  },
 actions: {
   // removeToken: (context) => {
     // context.commit('setToken')
   // }
 },
});
export default store;

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

// 封裝axios
import axios from 'axios'
// 序列化
import QS from 'qs';
// vuex
import store from '../store/index'
//這一步的目的是判斷出當(dāng)前是開發(fā)環(huán)境還是生成環(huán)境，方法不止一種，達(dá)到目的就行
// if(process.env.NODE_ENV=="development"){
//   baseURL=''
// }else{
//   baseURL=''
// }
// 使用自定義的配置文件發(fā)送請(qǐng)求
const instance = axios.create({
    baseURL: '',
    timeout: 80000,
    headers: {
        // 'Content-Type': 'application/json;charset=UTF-8',
        // 'custome-header':'tianliangjiaoyu'
    }
});
// post請(qǐng)求的時(shí)候，我們需要加上一個(gè)請(qǐng)求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(shè)置，即設(shè)置post的請(qǐng)求頭為
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請(qǐng)求攔截器
instance.interceptors.request.use(function (config) {
    // 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token        
    // 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
    // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷 
    const token = store.getters.getToken;
    if (token) {
        // 已經(jīng)登錄成功，統(tǒng)一添加token
        config.headers.Authorization = `Bearer ${token}`
    }
    // token && (config.headers.Authorization = token);
    return config;
}, function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
});
// 這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，
// 然后用戶每次在進(jìn)入頁面的時(shí)候（即在main.js中），會(huì)首先從本地存儲(chǔ)中讀取token，如果token存在說明用戶已經(jīng)登陸過，
// 則更新vuex中的token狀態(tài)。然后，在每次請(qǐng)求接口的時(shí)候，都會(huì)在請(qǐng)求的header中攜帶token，
// 后臺(tái)人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
    if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
}, function (error) {
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    if (error.response.status) {
        switch (error.response.status) {
            // 401: 未登錄
            // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
            // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
            case 401:
                router.replace({
                    path: '/login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
                break;
            // 403 token過期
            // 登錄過期對(duì)用戶進(jìn)行提示
            // 清除本地token和清空vuex中token對(duì)象
            // 跳轉(zhuǎn)登錄頁面                
            case 403:
                this.$message({
                    message: '登錄過期，請(qǐng)重新登錄',
                    duration: 1000,
                    type: 'success'
                });
                // 清除token
                localStorage.removeItem('token');
                store.commit('loginSuccess', null);
                // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面 
                setTimeout(() => {
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                }, 1000);
                break;
            // 404請(qǐng)求不存在
            case 404:
                this.$message({
                    message: '網(wǎng)絡(luò)請(qǐng)求不存在',
                    duration: 1500,
                    type: 'success'
                });
                break;
            // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
            default:
                this.$message({
                    message: error.response.data.message,
                    duration: 1500,
                    type: 'success'
                });
        }
        return Promise.reject(error.response);
    }
});
/** 
 * get方法，對(duì)應(yīng)get請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
/** 
 * post方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params, headers) {
    return new Promise((resolve, reject) => {
        instance.post(url, QS.stringify(params), headers)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

import {get,post} from './request'
let apiFun = null;
apiFun.postLogin = p => post('api/v1/users/my_address/address_edit_before', p)
export default apiFun;

import apiFun from "./network/api";
Vue.prototype.$apiFun = apiFun;//請(qǐng)求接口api

// 調(diào)用api接口，并且提供了兩個(gè)參數(shù)                
           this.$apiFun.postLogin({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 獲取數(shù)據(jù)成功后的其他操作
                ………………                
            })  

import Vue from "vue"
import Router from "vue-router"
import Home from '../views/Home.vue'
import store from '../store/index'
Vue.use(Router)
let routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        // 重定向
        redirect: '/publiccloud',
        children: [
            {
                path: '/publiccloud',
                name: '公有云用戶管理',
                component: () => import('../views/publicCloud/PublicCloud.vue')
            },
            {
                path: '/admin',
                name: '管理員管理',
                component: () => import('../views/admin/Admin.vue')
            }
        ]
    },
    // 登陸頁面
    {
        path: "/Login",
        name: "登錄頁面",
        component: () => import('../views/login/Login.vue')
    },
];
let router = new Router({
    routes,
    mode: 'history',
    // 全局配置激活路由的class類名，處與活躍（動(dòng)態(tài)）就會(huì)用上這個(gè)類名
    linkActiveClass: 'active'
})
// 設(shè)置路由守衛(wèi)，在進(jìn)頁面之前，判斷有token，才進(jìn)入頁面，否則返回登錄頁面
if (storage.get("token")) {
    store.commit("setToken", localStorage.getItem("token"));
  }
router.beforeEach((to, from, next) => {
    // 設(shè)置路由守衛(wèi)，在進(jìn)頁面之前，判斷有token，才進(jìn)入頁面
        if (token) {
            next('/')
        } else {
            // 沒有token就調(diào)用后端接口，跳轉(zhuǎn)地址
            getAddress().then((res) => {
              if (res.data.code === 200) {
                location.href = res.data.data.redirectUri
              }
            })
        }
});
export default router

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let that = this;
          // console.log('username',this.loginForm.username)
          // 通過校驗(yàn)規(guī)則后進(jìn)入校驗(yàn)用戶名密碼是否正確
          // 沒有后臺(tái)接口可以自定義一個(gè)函數(shù)來模擬，替換postLogin
          this.$apiFun.postLogin(this.loginForm.username, this.loginForm.password)
            .then(res => {
              console.log(res);
               that.$store.commit("setToken", res.data.token);
               that.$store.commit("setUserInfo", res.data.account);
              this.$notify({
                title: "登錄成功",
                type: "success",
                showClose: false,
                duration: 1000
              });
              setTimeout(() => {
                // 此時(shí)要判斷/login后面的參數(shù)redirect，若無參數(shù)，進(jìn)入主頁；
                this.$router.push("/index");
                // 若有參數(shù)則參數(shù)為未有權(quán)限的那個(gè)路由，跳轉(zhuǎn)到那個(gè)路由
                // this.$router.push(***); -- 具體要自己在這實(shí)現(xiàn)
              }, 1000);
            })
            .catch(error => {
            // 錯(cuò)誤分為 status-請(qǐng)求錯(cuò)誤 和 code-賬號(hào)密碼錯(cuò)誤
              this.$message.error(error);
              console.log(error);
            });
        } else {
        // 不符合前端校驗(yàn)
          this.$message.error('format error：'+error);
          console.log('format error：',error);
          return false;
        }
      });
    }