vue axios新手實踐實現登陸

2021-08-20 20:54:12 字數 1757 閱讀 9032

其實像這類的文章網上已經有很多很好的,寫這篇文章,相當於是做個筆記,以防以後忘記

用到的:1、 vuex 2、axios 3、vue-route

登陸流程為:1、提交登陸表單,拿到後台返回的資料

2、將資料存入vuex

// store index.js

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

// 初始化時用sessionstore.getitem('token'),這樣子重新整理頁面就無需重新登入

const state =

const mutations = ,

//獲取使用者名稱

get_user: (state, data) => ,

//登出

logout: (state) =>

}const actions =

export default new vuex.store()

import store from './store/index'

new vue()

import vue from

'vue'

import router from

'vue-router'

import login from

'../components/login'

import activity from

'../components/activity'

import index from

'../components/index'

import store from

'../store/index'

vue.use(router)

const router = new router(,,}

]})// 註冊全域性鉤子用來攔截導航

router.beforeeach((to, from, next) => else // 將跳轉的路由path作為引數,登入成功後跳轉到該路由})}

} else

})export

default router

這裡我用到router.beforeeach來實現攔截登陸,

1、在需要驗證的路由的meta裡加入我們自己的requireauth

2、router.beforeeach裡通過requireauth驗證該元件是否需要登陸

3、驗證token如果為flase就表示未登陸跳轉到登入頁

submitlogin () )

.then((response) => )

this.$router.push()}})

.catch(function (error) )

} else

})},

後台我沒寫,是用mock.js攔截ajax請求

因為我用的是element-ui所以上面**有一些直接無視,看核心的就行

1、在資料返回成功後用this.$store.commit來更新vuex裡的資料

2、登陸成功後跳轉this.$router.push()跳轉頁面,

這裡注意,如果你在前面導航攔截的鉤子用了query: 的話,

這裡就 用 this.$router.push(this.$route.query.redirect);這樣頁面就能跳到

你跳到登陸頁面前要去的那個路由了

vue axios新手實踐實現登陸

登陸流程為 1 提交登陸表單,拿到後台返回的資料 2 將資料存入vuex store index.js import vue from vue import vuex from vuex vue.use vuex 初始化時用sessionstore.getitem token 這樣子重新整理頁面就無...

vue axios實現檔案上傳

input元素type改為file型別,accept限制指定的檔案型別,multiple可以多傳送檔案 formdata私有類物件,訪問不到,可以通過get判斷值是否傳進去 export default name selectthefile methods 獲取檔案 getfile function...

vue axios實現前端登入攔截

路由攔截 vue axios實現前端登入攔截 第二步 http配置 結合ui框架 前言 如果你是求職者,專案寫了運用了axios,面試官可能會問你 1.為什麼 axios 既可以當函式呼叫,也可以當物件使用,比如axios axios.get。2.簡述 axios 呼叫流程。3.有用過 嗎?原理是怎...