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

Vue登錄注冊(cè)并保持登錄狀態(tài)的方法

 更新時(shí)間:2018年08月17日 10:26:42   作者:你響度講D咩嘢  
這篇文章主要介紹了Vue登錄注冊(cè)并保持登錄狀態(tài)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

關(guān)于vue登錄注冊(cè),并保持登錄狀態(tài),是vue玩家必經(jīng)之路,網(wǎng)上也有很多的解決方法,但是有一些太過于復(fù)雜,新手可能會(huì)看的一臉懵逼,現(xiàn)在給大家介紹一種我自己寫項(xiàng)目在用而且并不難理解的一種方法。

項(xiàng)目中有一些路由是需要登錄才可以進(jìn)入的,比如首頁,個(gè)人中心等等

有一些路由是不需要登錄就可以進(jìn)入,比如登錄頁,注冊(cè)頁,忘記密碼等等

那如何判斷路由是否需要登錄呢?就要在路由JS里面做文章

在router.js中添加meta區(qū)分

比如登錄注冊(cè)頁面,不需要登錄即可進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為false

{
 //登錄
 path: '/login',
 component: login,
 meta: {
  isLogin: false
 }
},
{
 //注冊(cè)
 path: '/register',
 component: register,
 meta: {
  isLogin: false
 }
},

而在首頁我們需要登錄才能進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為true

{
 //首頁
 path: '/home',
 component: home,
 meta: {
  isLogin: true
 },
}

這樣我們就為進(jìn)入各個(gè)路由是否需要登錄做了區(qū)分。

接下來我們?cè)趌ogin.vue中修改登錄后狀態(tài)

我們使用axios向后臺(tái)發(fā)起登錄請(qǐng)求

this.$axios.post("/xxx/login", {user:name,password:pwd})
  .then(data => {
    //登錄失敗,先不討論
    if (data.data.status != 200) {
     //iViewUi的友好提示
     this.$Message.error(data.data.message);
    //登錄成功
    } else {
     //設(shè)置Vuex登錄標(biāo)志為true,默認(rèn)userLogin為false
     this.$store.dispatch("userLogin", true);
     //Vuex在用戶刷新的時(shí)候userLogin會(huì)回到默認(rèn)值false,所以我們需要用到HTML5儲(chǔ)存
     //我們?cè)O(shè)置一個(gè)名為Flag,值為isLogin的字段,作用是如果Flag有值且為isLogin的時(shí)候,證明用戶已經(jīng)登錄了。
     localStorage.setItem("Flag", "isLogin");
     //iViewUi的友好提示
     this.$Message.success(data.data.message);
     //登錄成功后跳轉(zhuǎn)到指定頁面
     this.$router.push("/home");
    }
 });

Vuex里面我是這樣寫的(如果項(xiàng)目不需要Vuex,那么直接使用HTML5儲(chǔ)存就可以了):

export const store = new Vuex.Store({
 // 設(shè)置屬性
 state: {
  isLogin: false,
 },

 // 獲取屬性的狀態(tài)
 getters: {
  //獲取登錄狀態(tài)
  isLogin: state => state.isLogin,
 },

 // 設(shè)置屬性狀態(tài)
 mutations: {
  //保存登錄狀態(tài)
  userStatus(state, flag) {
   state.isLogin = flag
  },
 },

 // 應(yīng)用mutations
 actions: {
  //獲取登錄狀態(tài)
  setUser({commit}, flag) {
   commit("userStatus", flag)
  },
 }
})

重點(diǎn)來了~,在mian.js里

router.beforeEach((to, from, next) => {

 //獲取用戶登錄成功后儲(chǔ)存的登錄標(biāo)志
 let getFlag = localStorage.getItem("Flag");

 //如果登錄標(biāo)志存在且為isLogin,即用戶已登錄
 if(getFlag === "isLogin"){

  //設(shè)置vuex登錄狀態(tài)為已登錄
  store.state.isLogin = true
  next()

  //如果已登錄,還想想進(jìn)入登錄注冊(cè)界面,則定向回首頁
  if (!to.meta.isLogin) {
    //iViewUi友好提示
   iView.Message.error('請(qǐng)先退出登錄')
   next({
    path: '/home'
   })
  }
 
 //如果登錄標(biāo)志不存在,即未登錄
 }else{

  //用戶想進(jìn)入需要登錄的頁面,則定向回登錄界面
  if(to.meta.isLogin){
   next({
    path: '/login',
   })
   //iViewUi友好提示
   iView.Message.info('請(qǐng)先登錄')
  //用戶進(jìn)入無需登錄的界面,則跳轉(zhuǎn)繼續(xù)
  }else{
   next()
  }

 }

});

router.afterEach(route => {
 window.scroll(0, 0);
});

這樣就已經(jīng)完成了Vue的登錄注冊(cè),當(dāng)用戶關(guān)閉瀏覽器或者第二天再次進(jìn)入網(wǎng)站,用戶依舊可以保持著登錄的狀態(tài)直到用戶手動(dòng)退出登錄。

Tips:用戶退出只需要localStorage.removeItem("Flag")即可

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

相關(guān)文章

  • 記一次微信小程序與webviewH5通信的踩坑記錄

    記一次微信小程序與webviewH5通信的踩坑記錄

    uniapp開發(fā)小程序的過程中主、分包有大小限制,隨著業(yè)務(wù)的增加,使用web-view加載H5的方式,往往純加載并不能滿足業(yè)務(wù)需求,這個(gè)時(shí)候就得了解小程序與H5的交互,這篇文章主要給大家介紹了關(guān)于微信小程序與webviewH5通信的踩坑記錄,需要的朋友可以參考下
    2024-07-07
  • elementUI組件el-dropdown(踩坑)

    elementUI組件el-dropdown(踩坑)

    本文主要介紹了elementUI組件el-dropdown的一些坑,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-12-12
  • 詳解Vue CLI3配置解析之css.extract

    詳解Vue CLI3配置解析之css.extract

    這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法

    vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • vue項(xiàng)目中常見問題及解決方案(推薦)

    vue項(xiàng)目中常見問題及解決方案(推薦)

    這篇文章主要介紹了vue項(xiàng)目中常見問題及解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-10-10
  • Vue 根據(jù)條件判斷van-tab的顯示方式

    Vue 根據(jù)條件判斷van-tab的顯示方式

    這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 深入淺析vue組件間事件傳遞

    深入淺析vue組件間事件傳遞

    最近的工作需要用到vue,所以最近接觸最多的就是vue,下面小編給大家介紹下vue組件間事件傳遞,需要的朋友參考下吧
    2017-12-12
  • 使用vite兼容低端瀏覽器配置

    使用vite兼容低端瀏覽器配置

    這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • 前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄

    前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄

    使用Vue做前后端分離項(xiàng)目時(shí),通常前端是單獨(dú)部署,用戶訪問的也是前端項(xiàng)目地址,因此前端開發(fā)人員很有必要熟悉一下項(xiàng)目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目部署到服務(wù)器的全過程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • Vue打包路徑配置過程

    Vue打包路徑配置過程

    這篇文章主要介紹了Vue打包路徑配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評(píng)論