import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // token: "",
        //用戶的信息可以直接從瀏覽器中取出來(lái)
        token: localStorage.getItem("token"),
        //反序列化操作
        userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
    },
    mutations: {
        /**類似set操作*/
        //給token賦值
        SET_TOKEN: (state, token) => {
            state.token = token;
            //將信息存儲(chǔ)到瀏覽器中，以至于瀏覽器關(guān)閉時(shí)信息還在
            localStorage.setItem("token", token);
        },
        //給userinfo賦值
        SET_USERINFO: (state, userInfo) => {
            state.userInfo = userInfo;
            //session會(huì)在每次瀏覽器關(guān)閉時(shí)清空，在重新登錄后再生成
            //由于sessionStorage不能存儲(chǔ)對(duì)象，所以要將其存儲(chǔ)成字符串的形式
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
        },
        //移除用戶信息
        REMOVE_INFO: (state) => {
            //移除用戶信息時(shí)將用戶所有的信息都置為空
            state.token = "";
            state.userInfo = {};
            localStorage.setItem("token", "");
            sessionStorage.setItem("userInfo", JSON.stringify(""));
        }

    },
    getters: {
        /**類似get請(qǐng)求*/
        //獲取用戶信息
        getUser: state => {
            return state.userInfo;
        }
    },
    actions: {},
    modules: {}
})

/**
 * 路由注冊(cè)中心
 */

import Vue from 'vue'
import VueRouter from 'vue-router'


//注冊(cè)頁(yè)面
import Login from '../views/Login.vue'
import BlogEdit from '../views/BlogEdit.vue'


Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/blog/add',
        name: 'BlogAdd',
        component: BlogEdit,
        //添加權(quán)限訪問(wèn)，表示只有登錄之后才能進(jìn)行該操作
        meta: {
            requireAuth: true
        }
    },


]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

/**
 * 請(qǐng)求登錄驗(yàn)證，如果沒(méi)有登錄，不能訪問(wèn)頁(yè)面，返回到登錄頁(yè)面
 */
import router from "./router";

//路由判斷登錄，根據(jù)路由配置文件的參數(shù)
router.beforeEach((to,from,next)=>{
    //判斷該路由是否需要登錄權(quán)限
    //record.meta.requireAuth是獲取到該請(qǐng)求中攜帶的該參數(shù)
    if (to.matched.some(record => record.meta.requireAuth)){
        //獲取到本地的token
        const token = localStorage.getItem("token")
        console.log("顯示token----------：" + token)

        //判斷當(dāng)前的token是否存在，也就是登錄時(shí)的token
        if (token){
            //如果指向的是登錄頁(yè)面，不做任何操作
            if (to.path === "/login"){

            }else {
                //如果不是登錄頁(yè)面，且token存在，就放行
                next()
            }
        }else {
        //    如果token不存在
        //    前往登錄
            next({path:'/login'})
        }

    }else {
        //如果不需要登錄認(rèn)證，就直接訪問(wèn)
        next()
    }
})

//導(dǎo)入permission.js，用戶進(jìn)行前端的權(quán)限控制
import "./permission"