Vue 登陆 处理 token
vue 处理 token最开始后端来和我说 token 时候,之前假期学习的时候,没接触过toen,当时我听的是一脸懵逼,只能装着很懂的样子,后来查了一些资料,终于明白了token 的原理,以及应用。token 原理token 的意思是 令牌, 就像是我们登陆某个账号时,会向你的安全令发送验证一样。一个道理, 在前端处理登陆时,并非简单的验证账号密码是否正确, 而是发送给后台。后台...
vue 处理 token
最开始后端来和我说 token 时候,
虽然装着很懂的样子,但当时我听的是一脸懵逼
之前学习的时候,根本没接触过token,
后来查了一些资料,终于明白了token 的原理,以及应用。
token 原理
token 的意思是 令牌, 就像是我们登陆某个账号时,会向你的安全令发送验证一样。
一个道理, 在前端处理登陆时,并非简单的验证账号密码是否正确, 而是发送给后台。
后台验证成功后, 会发送给我们一个 token。
token 大概长这样:
27d2da79303d4abaa271e71c2d6f3b48.d86c828583c5c6160e8acfee88ba1590
在我们登陆成功之后,后台会返回给我们token ,之后的每一次请求, 都要先验证token。
就是说,我们要将token 放到请求里。 token正确,才能执行下一步操作。
总而言之,使用token 会很安全。
处理 token
token 的处理思路很简单:
1.把冰箱门打开
2.向后台发送登陆请求,
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 = token
sessionStorage.token = token
},
del_token (state) {
state.token = ''
sessionStorage.removeItem('token')
}
}
})
这里在 mutation
里设置了两个方法 set :设置 和 del :删除 两个方法。
具体操作
首先在登陆界面写一个有关登陆的函数,在其中发送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_token
this.$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)
})
}
在这里要注意的是后台与我约定好了 ,在每次发送请求时,在token前面加一个 字符串和一个空格。
所以是这样 let data = 'brear ' + res.data.access_token
总之具体的需求 还是根据实际情况而定,这里只是储存token,以及登陆成功跳转到主页
还要注意的是我们这里用到的是 access_token ,有关 access_token 和 refresh_token ,有兴趣的同学 可以去百度一下。
这里成功获取到了token,但是之前提到过,我们每次发送请求时,都需要验证 token,
这就需要把 token 放到 header 里,就需要配置 ajax 拦截器。
还是axios…
我这里直接在 main.js 文件里配置
axios.defaults.headers.common['authorization'] = store.state.token
axios.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 拦截器
在发送请求之前 先将 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.token
axios.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/>'
})
更多推荐
所有评论(0)