Vue2 实战项目

项目初始化

vue create vue2-project
cd vue2-project
yarn serve

项目结构

src/
├── api/              # API 接口
├── assets/           # 静态资源
├── components/       # 公共组件
├── directives/       # 自定义指令
├── filters/          # 过滤器
├── layout/           # 布局组件
├── router/           # 路由配置
├── store/            # Vuex 状态管理
├── styles/           # 全局样式
├── utils/            # 工具函数
├── views/            # 页面组件
├── App.vue
└── main.js

路由配置

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/layout/BasicLayout'),
    children: [
      {
        path: '',
        name: 'Home',
        component: () => import('@/views/Home')
      },
      {
        path: 'about',
        name: 'About',
        component: () => import('@/views/About')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

API 封装

// utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      return Promise.reject(new Error(res.message))
    }
    return res
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

状态管理

// store/modules/user.js
import { login, getUserInfo } from '@/api/user'

export default {
  namespaced: true,
  state: {
    token: localStorage.getItem('token') || '',
    userInfo: null
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    async login({ commit }, userInfo) {
      const { data } = await login(userInfo)
      commit('SET_TOKEN', data.token)
    },
    async getUserInfo({ commit }) {
      const { data } = await getUserInfo()
      commit('SET_USER_INFO', data)
    }
  }
}

权限控制

// router/permission.js
import router from './index'
import store from '@/store'

router.beforeEach(async (to, from, next) => {
  const token = store.state.user.token
  
  if (token) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (!store.state.user.userInfo) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})