https://www.cnblogs.com/chentianwei/p/10156459.html
之前博客：建立了一个app。使用loacal storage 来管理tokens（通过client-side anuthentication 生成）。
问题是这种方法有些麻烦。
每次要检验用户是否通过验证，都需要先储存auth token和user信息进localStorage，然后在从中取出来进行各种各样的条件判断，boring。
this.$http.post(url, {
//...略
})
.then(response => {
localStorage.setItem('user', JSON.stringify(response.data.user))
localStorage.setItem('jwt', response.data.token) if (localStorage.getItem('jwt') != null) {
//...略
}
})／／
可以改用Vuex。
使用store来管理authentication state, 然后只需使用少许代码即可检查我们的application.
main.js引进axios
import Axios from 'axios'Vue.prototype.$http = Axios
const token = localStorage.getItem('token')
if (token) {
Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}
We also set the Authorization on axios header to our token, so our requests can be processed if a token is required. This way, we do not have to set token anytime we want to make a request.
默认设置，所有请求都会配置到：
给axios的headers赋值token 。这样，无需在每一次想要发出请求时，都设置token。
store.js解释
state存储
-
authentication status, 用于当使用mutation时，status数据储存验证过程的状态：pending，success, error。
-
jwt token
-
user信息
actions中的函数
login函数：
login({commit}, user) {
return new Promise((resolve, reject) => {
commit('auth_request')
// 这是其中一种类似config的写法，也可以使用axios.post('', {...})
axios({url: 'http://localhost:3000/login', data:user, method: 'POST'})
.then(resp => {
const token = resp.data.token
const user = resp.data.user
localStorage.setItem('token', token)
//main.js中设置了Vue.prototype.$http = Axios
axios.defualts.headers.common['Authorization'] = token
commit('auth_success', token, user)
// 返回一个状态由resp决定的Promise对象。
resolve(resp)
})
.catch(err => {
commit('auth_error')
localStorage.removeItem('token')
// 返回一个状态为失败的Promise对象
reject(err)
})
})
},
这里使用new Promise构造器返回一个promise对象。
login action用于验证一个user,并commit用户的credentials到vuex store。
- 使用axios调用服务器的login路由，并返回需要的data。
- 然后储存token到localStorage，
- 然后传递token和user的信息到auth_success mutation来更新store.state中的属性。
- 同时，也设置axios的headers。
axios.defaults.headers.common['Authorization'] = token
⚠️token不要储存在vuex store中，一旦离开程序，所有的Vuex.store中的data都会消失。因此，为了确保用户返回到程序后，只要token处于验证期内, 就无需让user再登陆一次。需要把token储存再localStorage, 即本地设备中。
最后返回promise对象, 以便在login完成后，能够返回一个response给user。
知识扩展：
Promise对象及构造函数
Promise对象用于表示一个异步操作的最终状态（完成或失败），以及返回的值。
new Promise产生的构造函数用于包装还未支持promises的函数。
const myFirstPromise = new Promise((resolve, reject) => {
// ?做一些异步操作，最终会调用下面两者之一:
//
// resolve(someValue); // fulfilled
// ?或
// reject("failure reason"); // rejected
});
例子：
var promisel = new Promise(function(resolve, reject) {
//当异步代码执行成功后，调用resolve(),当异步代码执行失败后，调用reject()
//本例子使用setTimout()来模拟异步代码
//真实环境，通常使用HTMl5 API,或者如XHR。
setTimeout(function() {
resolve('Success!') //Yes! Everything went well!
}, 300);
})promisel.then(function(value) {
console.log(value)
//控制台输出的是"Success"
})
描述：
Promise 对象是一个代理对象（代理一个值), 被代理的值在Promise对象创建时可能是未知的。
Promise is a proxy for a value not necessarily known when the promise is created。
它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。
It allows you to associate handlers with an asynchronous action’s success value or failure reason.
这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
一个Promise有3种状态：
- pending, 之后会导致成功或失败：
- fulfilled
- rejected
Promise.reject(reason)- 返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
Promise.resolve(value)- 返回一个状态由给定value决定的Promise对象。
创建register action
和login action代码基本一样。区别是aixos.post的url路由不一样。
它们都会commit(‘auth_request’), commit(‘auth_success’)因为这两个action的目标都是把user信息存入state。
创建logout action
当登出后，删除储存在本地设备的token。
同时使用delete方法删除Vue实例对象的属性。 这里用delete axios的headers。
logout({commit}) {
return new Promise((resolve, reject) => {
commit('logout')
localStorage.removeItem('token')
// 使用Vue.delete(target), target可以是对象或数组。
delete axios.defaults.headers.common['Authorization']
resolve()
})
}
Hide Pages Behind Auth
本文的目的时implement anthentication，未通过验证的用户不能访问某些页面。
为了实现这个目的，需要弄明白：
1. 用户想访问的页面，应当有一个方法可以检查是否用户是通过验证的。
2.一个页面是专为验证过的用户访问的，还是所有用户都可以访问。
使用vue-router可以解决上面的2个问题
vue-router的导航守卫和路由meta信息可以对从当前url到另一个url的过程进行全程的控制。
- meta对路由记录进行条件设置
- navigation Guard对整个导航过程进行控制，根据meta进行判断是否跳转或者取消导航。
首先router.js:
import Vue from 'vue'
import Router from 'vue-router'
import store from './store.js'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Login from './components/Login.vue'
import Secure from './components/Secure.vue'
import Register from './components/Register.vue'Vue.use(Router)
引进vue, vue-router, 和vuex store setup.
所有的组件也被引进，用于定义路由。
然后，使用meta属性。
[...]
let router = new Router({
mode: 'history',
routes: [
//...略过home, login, register
{
path: '/secure',
name: 'secure',
component: Secure,
meta: {
requiresAuth: true
}
},
//...略过about
]
})export default router／
使用router.beforeEach注册一个全局前置守卫：
router.beforeEach((to,from,next) => {
// 要前往的路由是否有meta条件：
// 是，进一步判断
// 否，直接跳转到这个路由。
if (to.matched.some(record => record.meta.requiresAuth)) {
// 判断用户是否有权限进入这个页面：（使用了vuex store）
if (store.getters.isLoggedIn) {
next()
} else {
next('/login')
}
} else {
next()
}
})
给路由记录增加各类条件（使用meta），然后用Navigation Guards来进行判断后，取消或者跳转。
这里还使用了VuexStore.getters中的方法，去掉了重复的条件判断。
通过Vuex store,我们能够定义actions来检查路由记录中的条件，定义getters返回这些条件的结果。
处理到期的Token
因为储存token在本地localStorage,token会永久保存。
如果它已经到期，那么我们的请求会因为invalid token而失败
打开./src/App.vue，增加一个hook:
export default {
[...]
created: function () {
this.$http.interceptors.response.use(undefined, function (err) {
return new Promise(function (resolve, reject) {
if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
this.$store.dispatch(logout)
}
throw err;
});
});
}
}
拦截收到的response，看是否得到的是401 Unauthorized response。
如果是401，则dispatch logout action，让本地token被删除，然后跳转到login页面，重新登陆！
如此改善了用户体验！
