vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼
其實(shí)像這類(lèi)的文章網(wǎng)上已經(jīng)有很多很好的,寫(xiě)這篇文章,相當(dāng)于是做個(gè)筆記,以防以后忘記
用到的:1、 vuex 2、axios 3、vue-route
登陸流程為:
1、提交登陸表單,拿到后臺(tái)返回的數(shù)據(jù)
2、將數(shù)據(jù)存入vuex
vuex配置
這里直接跳過(guò)安裝之類(lèi)的,百度一大堆,我直接上代碼
// store index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 初始化時(shí)用sessionStore.getItem('token'),這樣子刷新頁(yè)面就無(wú)需重新登錄 const state = { user: window.sessionStorage.getItem('user'), token: window.sessionStorage.getItem('token') } const mutations = { //將token保存到sessionStorage里,token表示登陸狀態(tài) SET_TOKEN: (state, data) => { state.token = data window.sessionStorage.setItem('token', data) }, //獲取用戶名 GET_USER: (state, data) => { // 把用戶名存起來(lái) state.user = data window.sessionStorage.setItem('user', data) }, //登出 LOGOUT: (state) => { // 登出的時(shí)候要清除token state.token = null state.user = null window.sessionStorage.removeItem('token') window.sessionStorage.removeItem('user') } } const actions = { } export default new Vuex.Store({ state, mutations, actions })
1、我在這里是將登錄狀態(tài)token,和用戶名user存在sessionStorage里,以便組件使用,如果token為true則表示用戶已經(jīng)登陸sessionStorage和token這兩個(gè)東西很簡(jiǎn)單用法自行百度
2、不要忘了在main.js引入store,vue實(shí)例中也要加入store
main.js
import store from './store/index' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
vue-route配置
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({ routes: [ { path: '/', name: '/', component: Index }, { path: '/login', name: 'login', component: Login }, { path: '/activity', name: 'activity', component: Activity, meta: { requireAuth: true // 添加該字段,表示進(jìn)入這個(gè)路由是需要登錄的 } } ] }) // 注冊(cè)全局鉤子用來(lái)攔截導(dǎo)航 router.beforeEach((to, from, next) => { const token = store.state.token if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限 if (token) { // 通過(guò)vuex state獲取當(dāng)前的token是否存在 next() } else { console.log('該頁(yè)面需要登陸') next({ path: '/login' // query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由 }) } } else { next() } }) export default router
這里我用到router.beforeEach來(lái)實(shí)現(xiàn)攔截登陸,
1、在需要驗(yàn)證的路由的meta里加入我們自己的requireAuth
2、router.beforeEach里通過(guò)requireAuth驗(yàn)證該組件是否需要登陸
3、驗(yàn)證token如果為flase就表示未登陸跳轉(zhuǎn)到登錄頁(yè)
axios發(fā)送請(qǐng)求
submitLogin () { this.$refs.loginForm.validate(valid => { if (valid) { axios.post('/login', { user: this.loginForm.user, pass: this.loginForm.pass }) .then((response) => { if (response.status === 200) { this.$store.commit('SET_TOKEN', response.data.token) this.$store.commit('GET_USER', response.data.user) this.$message({ message: '登陸成功', type: 'success' }) this.$router.push({name: 'activity'}) } }) .catch(function (error) { console.log(error) }) } else { console.log('error submit!!') return false } }) },
后臺(tái)我沒(méi)寫(xiě),是用mock.js攔截ajax請(qǐng)求
因?yàn)槲矣玫氖莈lement-ui所以上面代碼有一些直接無(wú)視,看核心的就行
1、在數(shù)據(jù)返回成功后用this.$store.commit來(lái)更新vuex里的數(shù)據(jù)
2、登陸成功后跳轉(zhuǎn)this.$router.push()跳轉(zhuǎn)頁(yè)面,
這里注意,如果你在前面導(dǎo)航攔截的鉤子用了query: {redirect: to.fullPath}的話,這里就 用 this.$router.push(this.$route.query.redirect);這樣頁(yè)面就能跳到
你跳到登陸頁(yè)面前要去的那個(gè)路由了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
- Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
- 詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸
- 基于vue-cli3和element實(shí)現(xiàn)登陸頁(yè)面
- Vue 前端實(shí)現(xiàn)登陸攔截及axios 攔截器的使用
- 詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸
- 詳解springboot和vue前后端分離開(kāi)發(fā)跨域登陸問(wèn)題
- Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
- vue+koa2實(shí)現(xiàn)session、token登陸狀態(tài)驗(yàn)證的示例
- vue實(shí)現(xiàn)登陸功能
相關(guān)文章
vue?cli?局部混入mixin和全局混入mixin的過(guò)程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05在vue2?中使用?tailwindcss的方法?親測(cè)可用
這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測(cè)可用,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用詳解
這篇文章主要介紹了Vue過(guò)濾器與內(nèi)置指令和自定義指令及組件使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12解決vue無(wú)法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps
這篇文章主要介紹了解決vue無(wú)法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版
這篇文章主要介紹了詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09使用vue打包進(jìn)行云服務(wù)器上傳的問(wèn)題
這篇文章主要介紹了使用vue打包進(jìn)行云服務(wù)器上傳,本文給大家介紹的非常詳細(xì),對(duì)大家的工作或?qū)W習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03