Vue3 搭建前后端分离项目思路参考指南

### 项目说明 1. 前后端分离,当请求数据的时候,通过在请求头添加参数来判断当用请求是否合法。 2. 页面不是都能直接访问,要做权限。 ### 用到的包 ```js "dependencies": { "axios": "^0.18.0", "standard": "^12.0.1", "vue": "^2.5.17", "vue-router": "^3.0.1", "vue-touch": "^2.0.0-beta.4", "vuex": "^3.0.1" }, ``` ### 整体目录结构 ```js ---public ---src ---.env ---.env.local ---package.json ---package-lock.json ---vue.config.js ``` ### 思路 > 1.前后端分离,用vuex完成数据相关的操作,对于vuex结构,建议使用module对不同接口归类,如: ```js // 目录: ---src ------store ------index.js ---------module ------------user.js // 用户相关 ------------other.js // 其它相关 ``` > 2.通过在请求头添加参数来判断当用请求是否合法,通过axios来做数据请求,所以可以写一个公共的方法,如: ```js // 目录 ---src ------common ---------ajax.js ``` --- ```js import axios from 'axios' class Api { // 不用传token的请求 pubApi (config = {}) { return new Promise((resolve, reject) => { axios(config).then((res) => { resolve(res.data) }).catch((err) => { reject(err) }) }) } // 要token的请求 tokenApi (config = {}) { return new Promise((resolve, reject) => { let islog = sessionStorage.getItem('isLogin') if (islog === true) { let ajax = axios.create({ timeout: 30000, headers: { 'Authorization': sessionStorage.getItem('token') } }) ajax(config).then((res) => { resolve(res.data) }).catch((err) => { reject(err) }) } else { reject(Error('Authorization Is Null')) } }) } } let ajax = new Api() export default ajax ``` 在vuex直接引用使用就可以了 > 3.页面不是都能直接访问,要做权限 vue-router提供了meta参数的配置,用它来做权限: ```js // 目录 ---src ------router ---------index.js ``` --- ```js let isLogin = sessionStorage.getItem('isLogin') ? sessionStorage.getItem('isLogin') : false let masterRoute = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ // when not found url ,redirect welcome page. { path: '*', name: 'index', component: () => import('../welcome.vue') }, // need token { path: '/', name: 'main', meta: { isLogin: isLogin }, component: () => import('../views/main.vue'), children: [ ...addFuelCard, ...whiteApply ] }, // public page. { path: '/', name: 'pub', component: () => import('../views/main.vue'), children: [ ] } ] }) masterRoute.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta)) { if (isLogin) { next() } else { console.log('当前页面无权限') } } else { next() } }) export default masterRoute ``` ### 完。