怎么在vue中實(shí)現(xiàn)token權(quán)限認(rèn)證？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的內(nèi)鄉(xiāng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const router = new Router({...})

router.beforeEach((to, from, next) => {
 if(/^\/[S|B|V]/.test(to.path)){
  if (isLogin()) {//判斷token信息的自寫方法
   next();
  }
  else {
   next({ name: 'login' })//跳轉(zhuǎn)到登錄頁
  }
 }
 else {
  next();
 }
})

二是http 攔截器 ，統(tǒng)一處理所有http請(qǐng)求和響應(yīng)，就得用上 axios 的攔截器。

import axios from 'axios'
// http request 攔截器
axios.interceptors.request.use(function (config) {
  config.headers.token = sessionStorage.getItem("user_token")//將接口返回的token信息配置到接口請(qǐng)求中
  return config;
}, function (error) {
  return Promise.reject(error);
});
// http response 攔截器
axios.interceptors.response.use(function(response){
  if(response.data.code=='1001'||response.data.code=='1002'){//具體的判斷token失效的參數(shù)
    sessionStorage.setItem("user_token",'')
    sessionStorage.setItem("LoginUser",'{}')
    alert(response.data.msg);
    window.location.href='/#/login'//需求方要求一旦出錯(cuò)立即跳轉(zhuǎn)登錄，所以采取這種侵入式的手段。
  }else{
    return response
  }
}, function (error) {
  return Promise.reject(error);
});

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。