2024年前端最新vue加token(1)，前端面试基础题记不住

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可以在登陆的时候获取token，然后存起来，在拦截器里面判断是否有你的token，有就统一加上呗

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权 ，让用户重新登录。

深入理解token

为什么用token？

Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。

需要为 Token 设置有效期吗？

---

token和localstorage的结合

axios.interceptors.request.use(function (config) {

let userInfo = localStorage.getItem(‘userInfo’)

let token = ‘’

if (userInfo != undefined && userInfo.length > 10) {

userInfo = JSON.parse(userInfo)

if (userInfo.token) {

token = userInfo.token

}

}

//

// if (config.url.indexOf(url) === -1) {

// config.url = url + config.url /* 拼接完整请求路径 */

// }

// config.url = config.url.replace(, ‘/’)

config.withCredentials = true

config.headers = {

‘token’: token

}

return config

}, function (error) {

return Promise.reject(error)

})

axios.defaults.timeout = 30000 // 超时时间

axios.interceptors.response.use(function (response) {

// token 已过期，重定向到登录页面

if (response.data.status === 401) {

localStorage.clear()

router.replace(‘/’)

}

return response

}, function (error) {

if (error.message.includes(‘timeout’)) { // 判断请求异常信息中是否含有超时timeout字符串

return { data: { ‘status’: 601 } }

}

// Do something with response error

return Promise.reject(error)

})

方法1：

vuex + axios 做登录验证 并且保存登录状态

---

方法2：

在vue中如何获取token，并将token写进header

代码不一定，有几个报错的地方：

问：.vue文件如何引入store

login.vue

this.$axios({

method: ‘post’,

url: ‘/api/user/login’,

data: params

}).then(res => {

console.log(‘登录成功’)

console.log(res)

// 根据store中set_token方法将token保存至localStorage/sessionStorage中，data[“Authentication-Token”]，获取token的value值

this.$store.commit(‘set_token’, data[“Authentication-Token”])

if (store.state.token) {

this.$router.push(‘/person’)

console.log(store.state.token)

} else {

this.$router.replace(‘/login’)

}

})

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 = token

sessionStorage.token = token

},

del_token (state) {

state.token = ‘’

sessionStorage.removeItem(‘token’)

}

},

actions: {

},

modules: {

}

})

main.js

import Vue from ‘vue’

import ‘./cube-ui’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

import axios from ‘axios’

import Cube from ‘cube-ui’

Vue.use(Cube)

Vue.prototype.$axios = axios

Vue.config.productionTip = false

// 定义全局默认配置

axios.defaults.headers.common[‘Authentication-Token’] = store.state.token

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

// 判断是否存在token，如果存在将每个页面header都添加token

if (store.state.token) {

config.headers.common[‘Authentication-Token’] = store.state.token

}

return config

}, function (error) {

// 对请求错误做些什么

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}, function (error) {

// 对请求错误做些什么

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-EYtFP0UN-1715594323370)]

[外链图片转存中…(img-WTeNK3GA-1715594323371)]