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页面，重新登陆！
如此改善了用户体验！