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

更新時(shí)間：2019年10月25日 09:52:16 作者：zhuzhezhe

這篇文章主要介紹了vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

關(guān)鍵詞：前后端分離、jwt、登錄、權(quán)限驗(yàn)證

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

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

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

兩個(gè)問(wèn)題

現(xiàn)在面臨兩個(gè)問(wèn)題，

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

第二個(gè)問(wèn)題是，vue組件中使用axios請(qǐng)求后臺(tái)服務(wù)時(shí)，不同的接口有不同的權(quán)限。

后端接口權(quán)限

先來(lái)解決第二個(gè)問(wèn)題。vue不同組件都要用到axios，我們?cè)谌譃閍xios添加request和response的攔截器。

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

在main.js添加如下，或者新增一個(gè)http.js文件：

// * http request 攔截器
axios.interceptors.request.use(
  config => {
    // * 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
    // * token會(huì)在登錄之后存儲(chǔ)在本地
    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;
    // * 正常返回?cái)?shù)據(jù)
    if (data.code === 0) {
      // * 返回data
      return data
    }
    // * 如果code是20103 表示token未認(rèn)證(后端定義的錯(cuò)誤碼)
    // * 跳轉(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ā)起的任何請(qǐng)求之前都會(huì)檢查是否攜帶token，如果沒(méi)有就跳到login界面。

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

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

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

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

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

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

path: '/admin',
name: 'admin',
component: () => import('../views/admin/Admin.vue'),
// * 需要登錄才能訪問(wèn)
meta: {requiresAuth: true},

// * 全局鉤子
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // * 對(duì)于需要auth的路徑
    // * 沒(méi)有token信息，redirect to login
    if (!localStorage.token) {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

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