欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+axios新手實踐實現(xiàn)登陸的示例代碼

 更新時間:2018年06月06日 16:18:25   作者:ZONE_98F  
這篇文章主要介紹了vue+axios新手實踐實現(xiàn)登陸的示例代碼,實現(xiàn)了登陸攔截,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

其實像這類的文章網(wǎng)上已經(jīng)有很多很好的,寫這篇文章,相當于是做個筆記,以防以后忘記

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

登陸流程為:

1、提交登陸表單,拿到后臺返回的數(shù)據(jù)

2、將數(shù)據(jù)存入vuex

vuex配置

這里直接跳過安裝之類的,百度一大堆,我直接上代碼

// store index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 初始化時用sessionStore.getItem('token'),這樣子刷新頁面就無需重新登錄
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) => {
 // 把用戶名存起來
 state.user = data
 window.sessionStorage.setItem('user', data)
 },
 //登出
 LOGOUT: (state) => {
 // 登出的時候要清除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這兩個東西很簡單用法自行百度

2、不要忘了在main.js引入store,vue實例中也要加入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 // 添加該字段,表示進入這個路由是需要登錄的
  }
 }
 ]
})

// 注冊全局鉤子用來攔截導(dǎo)航
router.beforeEach((to, from, next) => {
 const token = store.state.token
 if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限
 if (token) { // 通過vuex state獲取當前的token是否存在
  next()
 } else {
  console.log('該頁面需要登陸')
  next({
  path: '/login'
  // query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù),登錄成功后跳轉(zhuǎn)到該路由
  })
 }
 } else {
 next()
 }
})

export default router

這里我用到router.beforeEach來實現(xiàn)攔截登陸,

1、在需要驗證的路由的meta里加入我們自己的requireAuth
2、router.beforeEach里通過requireAuth驗證該組件是否需要登陸
3、驗證token如果為flase就表示未登陸跳轉(zhuǎn)到登錄頁

axios發(fā)送請求

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
 }
 })
},

后臺我沒寫,是用mock.js攔截ajax請求

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

1、在數(shù)據(jù)返回成功后用this.$store.commit來更新vuex里的數(shù)據(jù)

2、登陸成功后跳轉(zhuǎn)this.$router.push()跳轉(zhuǎn)頁面,

這里注意,如果你在前面導(dǎo)航攔截的鉤子用了query: {redirect: to.fullPath}的話,這里就 用 this.$router.push(this.$route.query.redirect);這樣頁面就能跳到

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue?cli?局部混入mixin和全局混入mixin的過程

    vue?cli?局部混入mixin和全局混入mixin的過程

    這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 一文搞定vue3中的函數(shù)式彈窗

    一文搞定vue3中的函數(shù)式彈窗

    函數(shù)式彈窗是一種使用函數(shù)來創(chuàng)建彈窗的技術(shù),它可以簡化彈窗的使用,只需要在需要彈窗的地方調(diào)用函數(shù)就可以了,下面我們就來看看vue3中函數(shù)式彈窗的具體應(yīng)用吧
    2024-01-01
  • 在vue2?中使用?tailwindcss的方法?親測可用

    在vue2?中使用?tailwindcss的方法?親測可用

    這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測可用,本文分步驟給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-07-07
  • Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解

    Vue過濾器與內(nèi)置指令和自定義指令及組件使用詳解

    這篇文章主要介紹了Vue過濾器與內(nèi)置指令和自定義指令及組件使用方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-12-12
  • 解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因為在此系統(tǒng)上禁止運行腳本問題

    解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps

    這篇文章主要介紹了解決vue無法加載文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因為在此系統(tǒng)上禁止運行腳本問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中mixins混入的介紹與使用詳解

    Vue中mixins混入的介紹與使用詳解

    如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度,針對這種情況官方提供了Mixins特性,這時使用Vue mixins混入有很大好處,下面就介紹下Vue mixins混入使用方法,需要的朋友參考下吧
    2022-12-12
  • 詳解如何用VUE寫一個多用模態(tài)框組件模版

    詳解如何用VUE寫一個多用模態(tài)框組件模版

    這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue2和Vue3如何使用watch偵聽器詳解

    Vue2和Vue3如何使用watch偵聽器詳解

    這篇文章主要介紹了在Vue2和Vue3中如何使用watch偵聽器,分別對vue2及vue3作了詳細的說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2021-09-09
  • 使用vue打包進行云服務(wù)器上傳的問題

    使用vue打包進行云服務(wù)器上傳的問題

    這篇文章主要介紹了使用vue打包進行云服務(wù)器上傳,本文給大家介紹的非常詳細,對大家的工作或?qū)W習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03
  • 詳解Vue中的keep-alive

    詳解Vue中的keep-alive

    這篇文章主要為大家介紹了Vue中的keep-alive,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-01-01

最新評論