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

vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)

 更新時間:2019年10月25日 09:52:16   作者:zhuzhezhe  
這篇文章主要介紹了vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
關(guān)鍵詞:前后端分離、jwt、登錄、權(quán)限驗(yàn)證

最近在做一個小應(yīng)用,需要用到vue實(shí)現(xiàn)登錄,以及給不同路由設(shè)置權(quán)限。在網(wǎng)上看了很多文章,講的是亂七八糟。感嘆國內(nèi)技術(shù)類文章實(shí)在是差勁,抄來抄去。這篇文章就說說我最后是如何實(shí)現(xiàn)的。

前后端分離項(xiàng)目中,后端提供api接口給前端,使用jwt發(fā)放權(quán)限。

首先前端提供用戶名和密碼請求登錄接口,后端驗(yàn)證之后返回給前端一個token,之后前端在請求需要權(quán)限的接口時攜帶這個token就可以了。

兩個問題

現(xiàn)在面臨兩個問題,

首先vue中不同的路由有不同的權(quán)限,比如我要訪問后臺 /admin, 就需要先登錄才行,而有的頁面不需要登錄。

第二個問題是,vue組件中使用axios請求后臺服務(wù)時,不同的接口有不同的權(quán)限。

后端接口權(quán)限

先來解決第二個問題。vue不同組件都要用到axios,我們在全局為axios添加request和response的攔截器。

也就是,在發(fā)起請求之前,先檢測header是否攜帶token信息。在接收響應(yīng)之前,先查看后端返回狀態(tài)碼,如果說需要token驗(yàn)證就跳轉(zhuǎn)到登錄界面。

在main.js添加如下,或者新增一個http.js文件:

// * http request 攔截器
axios.interceptors.request.use(
  config => {
    // * 判斷是否存在token,如果存在的話,則每個http header都加上token
    // * token會在登錄之后存儲在本地
    if (localStorage.token) {
      config.headers["Authorization"] = `Bearer ${localStorage.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// * http response 攔截器
axios.interceptors.response.use(
  response => {
    let data = response.data;
    // * 正常返回數(shù)據(jù)
    if (data.code === 0) {
      // * 返回data
      return data
    }
    // * 如果code是20103 表示token未認(rèn)證(后端定義的錯誤碼)
    // * 跳轉(zhuǎn)到login
    if (data.code === 20103) {
      router.replace('/login')
    }
    return Promise.reject(data);
  },
  error => {
    return Promise.reject(error);
  });

Vue.prototype.$http = axios;

現(xiàn)在發(fā)起的任何請求之前都會檢查是否攜帶token,如果沒有就跳到login界面。

在login中,攜帶用戶名和密碼獲取token之后,存放到本地。

login.vue:

axios.post('/api/login', {
          email: this.email,
          password: this.password
        }) .then((res) => {
            // * 存儲token
            localStorage.setItem('token', res.data.token);
            console.info("login successful");
            // * 跳轉(zhuǎn)回登錄前頁面
            this.$router.push({path: this.$route.query.redirect || '/admin',})

          }).catch((error) => {
          console.error(error)
        });

前端vue路由權(quán)限

現(xiàn)在,訪問后端接口的權(quán)限問題解決了。但是在vue中我不同的頁面有不同的訪問權(quán)限該如何處理?vue-router官方文檔給出了例子:

在需要權(quán)限的路由添加meta信息,表明該路由需要登錄才能訪問,然后在所有路由跳轉(zhuǎn)之前添加處理函數(shù),如果沒有auth,跳轉(zhuǎn)到登錄:

path: '/admin',
name: 'admin',
component: () => import('../views/admin/Admin.vue'),
// * 需要登錄才能訪問
meta: {requiresAuth: true},
// * 全局鉤子
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // * 對于需要auth的路徑
    // * 沒有token信息,redirect to login
    if (!localStorage.token) {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

登出的話,清除token信息即可。

localStorage.removeItem("token")

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

相關(guān)文章

  • 解決Vue+Element ui開發(fā)中碰到的IE問題

    解決Vue+Element ui開發(fā)中碰到的IE問題

    今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法

    vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法

    當(dāng)我們新建vue3項(xiàng)目,package.json文件會自動給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項(xiàng)目越來越復(fù)雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧
    2023-10-10
  • Vue組件系列開發(fā)之模態(tài)框

    Vue組件系列開發(fā)之模態(tài)框

    這篇文章主要介紹了Vue組件系列開發(fā)之模態(tài)框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)

    淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)

    本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue-quill-editor如何設(shè)置字體大小

    vue-quill-editor如何設(shè)置字體大小

    這篇文章主要介紹了vue-quill-editor如何設(shè)置字體大小,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法

    基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實(shí)現(xiàn)方法

    VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術(shù)文檔而優(yōu)化的默認(rèn)主題。這么文章給大家詳細(xì)介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法,需要的朋友參考下吧
    2018-04-04
  • 解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題

    解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題

    這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 基于Vue實(shí)現(xiàn)一個textarea幽靈建議功能

    基于Vue實(shí)現(xiàn)一個textarea幽靈建議功能

    不知道你有沒有發(fā)現(xiàn)Bing AI聊天有個輸入提示功能,在用戶輸入部分內(nèi)容時后面會給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個功能稱為幽靈建議,接下來我將用Vue框架來實(shí)現(xiàn)這個功能,需要的朋友可以參考下
    2023-09-09
  • 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟

    在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟

    在前端開發(fā)中,尤其是利用Vue3構(gòu)建現(xiàn)代Web應(yīng)用時,掌握如何使用本地存儲(localStorage)來保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細(xì)介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來幫助理解,需要的朋友可以參考下
    2024-06-06
  • electron打包中的巨坑解決記錄

    electron打包中的巨坑解決記錄

    這篇文章主要為大家介紹了electron打包中的巨坑解決記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評論