vue中token是在服務端產生的一串字串，以作客戶端進行請求的一個令牌；其使用方法如：1、封裝操作localstorage本地儲存的方法；2、在封裝好storage後，將其掛載到全域元件中；3、在「request.js」裡放入「token」；4、在router下的「index.vue」裡設定路由守衛即可。
本教學操作環境：Windows10系統、vue3版、DELL G3電腦
vue中token用法是什麼？ Vue中如何使用token
# #1.了解（session，cookie）token
Token的引入：Token是在客戶端頻繁向服務端請求數據，服務端頻繁的去數據庫查詢用戶名和密碼並進行對比，判斷用戶名和密碼正確與否，並作出相應提示，在這樣的背景下，Token便應運而生。
2.token 優點
Token 完全由應用程式管理，所以它可以避免同源策略 Token 可以避免CSRF 攻擊
Token 可以是無狀態的，可以在多個服務間共享
1、第一次登入的時候，前端調後端的登陸接口，發送用戶名和密碼
3、前端拿到token，將token儲存到localStorage和vuex中，並跳轉路由頁面
4、前端每次跳轉路由，就
判斷localStroage 中有無token ，沒有就跳到登入頁面，有則跳到對應路由頁面
// 封装操作localstorage本地存储的方法 模块化
var storage = {
set(key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
get(key) {
return localStorage.getItem(key) != 'undefined' ? JSON.parse(localStorage.getItem(key)) : undefined },
getForIndex(index) {
return localStorage.key(index)
},
getKeys() {
let items = this.getAll()
let keys = []
for (let index = 0; index < items.length; index++) {
keys.push(items[index].key)
}
return keys },
getLength() {
return localStorage.length },
getSupport() {
return (typeof (Storage) !== 'undefined')
},
remove(key) {
localStorage.removeItem(key)
},
removeAll() {
localStorage.clear()
},
getAll() {
let len = localStorage.length // 获取长度 let arr = new Array(len) // 定义数据集 for (var i = 0; i < len; i++) {
// 获取key 索引从0开始
var getKey = localStorage.key(i)
// 获取key对应的值
var getVal = localStorage.getItem(getKey)
// 放进数组
arr[i] = {
'key': getKey, 'val': getVal }
}
return arr }}export default storageVue.prototype.$storage = storage;
import axios from 'axios'import storage from '@/storage'import router from '@/router'// create an axios instance
const service = axios.create({
baseURL: '/api', // url = base url + request url
timeout: 5000 // request timeout})// 添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
service.interceptors.request.use(
config => {
// 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token
// Authorization是必须的 let tokenInfo = storage.get('TOKEN')
const token = tokenInfo ? tokenInfo.accessToken : null
const tokenType = token ? tokenInfo.tokenType.substring(0, 1).toUpperCase() + tokenInfo.tokenType.substring(1) + ' ' : null if (token && tokenType) {
config.headers.Authorization = tokenType + token }
return config },
error => {
console.log('在request拦截器检查到错误：', error.response)
return Promise.reject(error)
})// respone拦截器
service.interceptors.response.use(
response => {
return response },
error => {
// 在status不正确的情况下，判别status状态码给出对应响应 if (error.response) {
console.log('在respone拦截器检查到错误：')
switch (error.response.status) {
case 204:
error.response.data.error = '204:No Content（没有内容）'
break
case 401:
// 可能是token过期，清除它
storage.remove('tokenInfo')
location.reload() // 刷新页面，触发路由守卫
error.response.data.error = '401:Unauthorized（未经授权）'
break
case 403:
error.response.data.error = '403:Forbidden（被禁止的）'
break
case 500:
error.response.data.error = '500:服务器内部错误'
break
default: return error }
return Promise.reject(error.response.data.error)
}
return Promise.reject(error)
})export default serviceimport Vue from 'vue'import Router from 'vue-router'import Login from '@/views/login';import Main from '@/main/index';import tip1 from '@/views/tip1';import tip2 from '@/views/tip2';import tip3 from '@/views/tip3';import storage from '@/storage'Vue.use(Router)const routes = [{
path: '/',
name: 'Login',
// redirect: '/login',
component: Login, }, {
path: "/login",
component: Login, }, {
path: '/Main',
component: Main,
children: [{
path: '/',
name: 'Tip1',
component: tip1 }, {
path: '/tip1',
name: 'Tip1',
component: tip1 }, {
path: '/tip2',
name: 'Tip2',
component: tip2,
meta: {
requireAuth: true
}
}, {
path: '/tip3',
name: 'Tip3',
component: tip3 }, ]
}]const router = new Router({
routes})// 设置路由守卫，在进页面之前，判断有token，才进入页面，否则返回登录页面
router.beforeEach((to, from, next) => {
// 默认requiresAuth为false才不需要登录，其他都要
// to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuth if (to.matched.some(r => r.meta.requireAuth) !== false) {
let tokenInfo = storage.get('TOKEN')
if (tokenInfo) {
console.log("有token")
next();
} else {
storage.remove('TOKEN')
next({
path: "/login",
query: {
redirect: to.fullPath } // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由 });
}
} else {
next(); //如果无需token,那么随它去吧 }});//暴露router实例export default router
// 1.将调用登录接口成功以后，把后端传过来的token放入本地缓存
// 2.路由跳转之前执行路由守卫，实例化一个Router对象，使用该对象内置方法beforeEach，在路由跳转前判断该页面是否设置了token，获取token
// 如果有token，next()继续执行路由跳转
// 如果没有token，跳转去登录界面meta: {
requireAuth: true
}以上是vue中token用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
