最開始后端來和我說 token 時候，
雖然裝著很懂的樣子，但當時我聽的是一臉懵逼
之前學習的時候，根本沒接觸過token，
后來查了一些資料，終于明白了token 的原理，以及應用。

token 原理

token 的意思是?令牌， 就像是我們登陸某個賬號時，會向你的安全令發(fā)送驗證一樣。

一個道理， 在前端處理登陸時，并非簡單的驗證賬號密碼是否正確， 而是發(fā)送給后臺。
后臺驗證成功后， 會發(fā)送給我們一個 token。

token 大概長這樣：
27d2da79303d4abaa271e71c2d6f3b48.d86c828583c5c6160e8acfee88ba1590

在我們登陸成功之后，后臺會返回給我們token ，之后的每一次請求， 都要先驗證token。

就是說，我們要將token 放到請求里。 token正確，才能執(zhí)行下一步操作。
總而言之，使用token 會很安全。

處理 token

token 的處理思路很簡單：
1.把冰箱門打開
2.向后臺發(fā)送登陸請求，
3.接收到后臺傳來的 token
4.將 token 儲存起來，
5.將 token 放到請求的 header 里
6.關上冰箱門

我這里儲存 token 選擇的是放到本地的Session Storage?里面，也用到了 vuex

vuex 需要提前配置好， 我這里使用的是單文件配置
下載什么的就略過了…
還有 store/index.js 的文件配置

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {token: ''},mutations: {set_token (state, token) {state.token = tokensessionStorage.token = token},del_token (state) {state.token = ''sessionStorage.removeItem('token')}} })

這里在?mutation?里設置了兩個方法?set?：設置 和?del?：刪除 兩個方法。

具體操作

首先在登陸界面寫一個有關登陸的函數，在其中發(fā)送ajax 請求，這里用的是 axios。

login () {this.$axios({method: 'post',url: '/api/v1/teacher/login',params: {'t_num': this.t_num,'t_pwd': this.t_pwd}}).then(res => {console.log(res)let data = 'brear ' + res.data.access_tokenthis.$store.commit('set_token', data)if (store.state.token) {this.$router.push('/home')console.log(store.state.token)} else {this.$router.replace('/login')}}).catch(err => {console.log(err)})}

在這里要注意的是后臺與我約定好了 ，在每次發(fā)送請求時，在token前面加一個 字符串和一個空格。
所以是這樣?let data = 'brear ' + res.data.access_token
總之具體的需求 還是根據實際情況而定，這里只是儲存token，以及登陸成功跳轉到主頁

還要注意的是我們這里用到的是?access_token?，有關?access_token?和?refresh_token?，有興趣的同學 可以去百度一下。

這里成功獲取到了token，但是之前提到過，我們每次發(fā)送請求時，都需要驗證 token，
這就需要把 token 放到 header 里，就需要配置 ajax 攔截器。

還是axios…

我這里直接在 main.js 文件里配置

axios.defaults.headers.common['authorization'] = store.state.tokenaxios.interceptors.request.use(config => {if (store.state.token) {config.headers.common['authorization'] = store.state.token}return config }, error => {return Promise.reject(error) })axios.interceptors.response.use(response => {return response},error => {if (error.response) {switch (error.response.status) {case 401:this.$store.commit('del_token')router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data)} )

這里用到的是 ajax 攔截器
在發(fā)送請求之前 先將 token 放到 header 里面 ，
如?axios.defaults.headers.common['authorization'] = store.state.token

還需要處理兩個情況，
1.token 不存在，跳轉到登陸頁，重新獲取 token
2.token 過期 ，如 error 返回 401 也是跳轉到登錄頁， 重新獲取token

關于路由 router

配置 token 時還需要判定跳轉頁面時 token 的授權。

還是直接上代碼

router.beforeEach((to, from, next) => {if (to.matched.some(r => r.meta.requireAuth)) {if (store.state.token) {next()} else {next({path: '/login',query: {redirect: to.fullPath}})}} else {next()} })

同樣是在 main.js 中配置，當然還要安裝vue-router …

同樣是單文件

這里的 router/index.js 就不仔細說了…

重要的是配置

if (sessionStorage.getItem('token')) {store.commit('set_token', sessionStorage.getItem('token')) }

這個寫到 router/index.js 文件中，

在 main.js 里 ：
引入 router…

import router from './router'

在每次跳轉頁面之前 判斷是否需要登陸 后查看

router.beforeEach((to, from, next) => {if (to.matched.some(r => r.meta.requireAuth)) {if (store.state.token) {next()} else {next({path: '/login',query: {redirect: to.fullPath}})}} else {next()} })

這里的
if (to.matched.some(r => r.meta.requireAuth))

需要在router/index 中配置：

{path: '/paper',name: 'Paper',component: Paper,meta: {requireAuth: true}}

就是在需要?登陸?才能操作的頁面里加入?meta

判斷是否需要登陸

最后附上 main.js 的所有代碼

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import Vuex from 'vuex' import App from './App' import router from './router' import store from './store/index' import axios from 'axios'Vue.prototype.$axios = axios Vue.use(Vuex) Vue.config.productionTip = false axios.defaults.headers.common['Content-type'] = 'application/json' axios.defaults.headers.common['authorization'] = store.state.tokenaxios.interceptors.request.use(config => {if (store.state.token) {config.headers.common['authorization'] = store.state.token}return config }, error => {return Promise.reject(error) })axios.interceptors.response.use(response => {return response},error => {if (error.response) {switch (error.response.status) {case 401:this.$store.commit('del_token')router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data)} ) router.beforeEach((to, from, next) => {if (to.matched.some(r => r.meta.requireAuth)) {if (store.state.token) {next()} else {next({path: '/login',query: {redirect: to.fullPath}})}} else {next()} })/* eslint-disable no-new */ new Vue({el: '#app',router,store,components: { App },template: '<App/>' })

總結

以上是生活随笔為你收集整理的工作总结9：vue处理token的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。