第二十七课 后台管理编写vuex状态管理

一、安装vuex

cnpm i vuex@3.1.3 -S

二、封装对token工具模块

src/utils/usertoken.js

const TOKEN_KEY  = "manager-token";
const USER_KEY = "manager-user";

//获取token
export function getToken(){
    return localStorage.getItem(TOKEN_KEY)
}

//保存token
export function setToken(token){
    return localStorage.setItem(TOKEN_KEY,token)
}

//获取用户信息
export function getUser(){
    return JSON.parse(localStorage.getItem(USER_KEY))
}

//保存用户信息
export function setUser(user){
    return localStorage.setItem(USER_KEY,JSON.stringify(user))
}

//移除用户信息
export function removeToken(){
    localStorage.removeItem('TOKEN_KEY')
    localStorage.removeItem('USER_KEY')
}

三、在store/modules/user.js新建文件

import {getToken,setToken,getUser,setUser,removeToken} from "@/utils/usertoken"

import {login,getUserInfo,logout} from  "@/api/login"

const state = {
    token:null,
    user:null
}

const mutations = {
    SET_TOKEN(state,token){
        state.token = token
    },
    SET_USER(state,user){
        state.user = user
    }
}

const actions = {
    Login({commit},form){
        login(form.username.trim(),form.password.trim()).then(reponse=>{
            const resp = reponse.data
            commit('SET_TOKEN',resp.data.token)
        })
    }
}

export default{
    state,
    mutations,
    actions
}

四、在store/index.js导入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

五、修改登录页面

view/login/index.vue

把原来的代码大部分注销，用this.$store.dispatch("Login",this.form)

onSubmitLogin() {
      this.$store.dispatch("Login",this.form).then(response=>{
        if(response.flag){
            this.$router.push("/")
        }else{
          this.$message({
            message:response.message,
            type:"warning"
          })
        }
      })
}

六、完善store/modules/user.js

const actions = {
    Login({commit},form){
        return new Promise((resolve,reject)=>{
            login(form.username.trim(),form.password.trim()).then(reponse=>{
                const resp = reponse.data
                commit('SET_TOKEN',resp.data.token);
                resolve(resp)
            }).catch(error=>{
                reject(error)
            })
        })
    }
}

七、完善permission.js

    const token = store.state.user.token

八、完善store/modules/user.js

const state = {
    token:getToken(),
    user:getUser()
}

GetUserInfo({commit,state}){
        return new Promise((resolve,reject)=>{
            getUserInfo(state.token).then(response=>{
                const respUser = response.data
                commit("SET_USER",respUser.data)
                resolve(respUser)
            })
        }).catch(error=>{
            reject(error)
        })
    }

九、src/permission.js

import router from './router/index.js'
import store from "./store/index.js"
router.beforeEach((to,from,next)=>{
    // const token = localStorage.getItem("manager-user");
    const token = store.state.user.token
    //没有获取到token
    if(!token){
        if(to.path !=='/login'){
            next({path:'/login'})
        }else{
            next()
        }
    }else{
        if(to.path =='/login'){
            next()
        }else{
            const userinfo = localStorage.getItem('manager-user');
            if(userinfo){
                next()
            }else{
                store.dispatch("GetUserInfo").then(response=>{
                    if(response.flag){
                        next()
                    }else{
                        next({path:"/login"})
                    }
                })
                // getUserInfo(token).then(response=>{
                //     const respUser = response.data
                //     if(respUser.flag){
                //         localStorage.setItem('manager-user',JSON.stringify(respUser))
                //         next()
                //     }else{
                //         next({path:'/login'})
                //     }
                // })
            }
        }
    }
})

十、src/store/user.js，编写退出系统的actios

Logout({commit,state}){
        return new Promise((resolve,reject)=>{
            logout(state.token).then(response=>{
                const resp = response.data
                commit("SET_TOKEN","")
                commit("SET_USER",null)
                removeToken()
                resolve(resp)
            }).catch(error=>{
                reject(error)
            })
        })
    }

十一、src/components/AppHeader/index.vue

注销logoutSystem函数中的localStorage.removeItem

logoutSystem(){
             if(response.flag){
              this.$router.push("/login");
            }else{
               this.$message({
                message: resp.message,
                type: "warning",
                duration: 1000,
              });
            }
          })
          this.$message("退出登录");
    },
    
  created() {
    this.userData = this.$store.state.user.user
  }