六、后台管理端【商家信息】页面逻辑 ​

async submitForm() {
  this.loading = true
  const requestApi = addShopInfoApi
  try {
    await requestApi(this.formInput)
    this.$message.success('操作成功')
    this.loading = false
    // 新增则跳转首页  修改则返回信息页
    this.$router.push(this.shopInfo ? '/settings' : '/')
  } catch (error) {
    this.loading = false
  }
}

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

Vue.use(Vuex)

export default new Vuex.Store({
	modules: { user },
  	getters: {
    	shopName: state => state.user.shopInfo?.name,
    	token: state => state.user.token
  	}
})

// 用户模块（商家）
import { loginApi } from "@/api/auth"
import { getShopInfoApi } from "@/api/merchant-info"
import { getToken, removeToken, setToken } from "@/utils/auth"

const defaultState = () => ({
  token: getToken(),
  shopInfo: null
})

const mutations = {
  SET_TOKEN (state, token) {
    state.token = token
  },
  SET_INFO (state, info) {
    state.shopInfo = info
  }
}

const actions = {
  // 登录
  async login({ commit, dispatch }, userInfo) {
    const { data } = await loginApi(userInfo)
    setToken(data)
    commit('SET_TOKEN', data)
  },
  // 获取商家信息
  async getShopInfo ({ commit }) {
    const { data } = await getShopInfoApi()
    commit('SET_INFO', data)
    return data
  },
  // 退出登录
  logout({ commit }) {
    removeToken()
    commit('SET_TOKEN', '')
    commit('SET_INFO', '')
  }
}

const getters = {}

export default {
	namespaced: true,
	state: defaultState(),
	mutations,
	actions,
	getters
}

// 登录
async login() {
    this.loading = true
    try {
        await this.$store.dispatch('user/login', this.formInput)
        this.$message.success('登录成功')
        this.loading = false
        this.$router.push('/dashboard')
    } catch (error) {
        this.loading = false
    }
}

// 路由前置守卫
router.beforeEach(async (to, from, next) => {
	console.log('路由进入前')
	// 开启加载进度条
	NProgress.start()

	// 设置页面标题
	document.title = getPageTitle(to.meta.title)

	// 判断用户是否登录?  ->  登录 放行  -> 未登录 跳转登录页面
	// 1. 取出token值【登录凭证】
	const token = store.getters.token
	// 2. 判断是否有token
	if (token) {
		// 3. 验证是否有商家信息【商家信息页 不需要验证】
		if (store.getters.shopName || to.path === '/modify-info') {
			// 4. 有商家信息
			next()
		} else {
			try {
				// 5. 无商家信息  重新拉取商家信息
				const info = await store.dispatch('user/getShopInfo')
				// 6. 拉取后还是无商家信息【跳转商家信息页】
				if (!info) {
					next('/modify-info')
				} else {
					next()
				}
			} catch (error) {
				// 5. 拉取信息失败
				store.dispatch('user/logout')
				next('/login')
			}
		}
	} else {
		// 3. 无token  判断当前页面是否为登录【直接放行 / 跳转登录】
		if (to.path === '/login') {
          next()
        } else {
          next('/login')
        }
	}
  	// 关闭加载进度条
	NProgress.done()
})

computed: {
    ...mapState('user', ['shopInfo', 'token']),
    title() {
        return this.shopInfo ? '修改店铺信息' : '设置店铺信息'
    }
},
mounted() {
    // 判断是否为信息
    if (this.shopInfo.name) {
      this.formInput = { ...this.shopInfo }
    }
}