1、安裝
在創建完vue-cli項目后,通過npm安裝到項目中。
npm install mockjs --save
2、在項目中創建Mock模塊
在src目錄下創建mock文件夾,並在mock文件夾中創建user.js和index.js。
user.js:用於生成模擬數據,例如(數據隨便寫的,沒用到mockjs的語法模板)
export const getUserInfo = () => { let userInfo = { "error_code": 0, "data": [{ "id": '1', "usertitle": "管理員", "username": "admin", "password": "123456", "token": "12345", }, { "id": '2', "usertitle": "超級管理員", "username": "root", "password": "root", "token": "23456", } ] } return userInfo }
index.js:mock模塊的入口文件,例如:
import Mock from 'mockjs' import { getUserInfo } from './user' let data = Mock.mock(/\/login/, 'get', getUserInfo) export default data
3、在項目中引入mock模塊
在main.js中,添加如下代碼:
if (process.env.NODE_ENV !== 'production') require('./mock/index')
判斷環境,開發環境引入mock模塊,生產環境就用線上真實的接口。
4、接口調用
調用方式:
this.$axios.get('/login').then(response=>{})
5、用戶登錄的簡單實現思路
1、第一次登錄的時候,前端調后端的登陸接口,發送用戶名和密碼
2、后端收到請求,驗證用戶名和密碼,驗證成功,就給前端返回一個token
3、前端拿到token,將token存儲到localStorage和vuex中,並跳轉路由頁面
4、前端每次跳轉路由,就判斷 localStroage 中有無 token ,沒有就跳轉到登錄頁面,有則跳轉到對應路由頁面
5、每次調后端接口,都要在請求頭中加token
6、后端判斷請求頭中有無token,有token,就拿到token並驗證token,驗證成功就返回數據,驗證失敗(例如:token過期)就返回401,請求頭中沒有token也返回401
7、如果前端拿到狀態碼為401,就清除token信息並跳轉到登錄頁面
router.beforeEach((to, from, next) => { //路由中設置的needLogin字段就在to當中 if(sessionStorage.getItem('token')){ //console.log(to.path) //每次跳轉的路徑 if(to.path === '/'){ //登錄狀態下 訪問login.vue頁面 會跳到index.vue next({path: '/index'}); }else{ next(); } }else{ // 如果沒有session ,訪問任何頁面。都會進入到 登錄頁 if (to.path === '/') { // 如果是登錄頁面的話,直接next() -->解決注銷后的循環執行bug next(); } else { // 否則 跳轉到登錄頁面 next({ path: '/' }); } } if (to.meta.title) { document.title = to.meta.title //設置頁面的title } if(to.fullPath == "/"){ if(sessionStorage.getItem('data')){ next({ path:from.fullPath }); }else { next(); } } })
axios.interceptors.request.use( //設置header,添加token config => { if (localStorage.getItem('token')) { config.headers.Authorization = localStorage.getItem('token'); } return config; }, error => { return Promise.reject(error); });