详解vue项目中使用token的身份验证的简单实践

工作原理

具体步骤

所用技术: vuex + axios + localStorage + vue-router

1、在登录路由添加自定义mate字段, 来记录该页面是否需要身份验证

//router.js{ path: "/index", name: "index", component: resolve => require(['./index.vue'], resolve), meta: {   requiresAuth: true  }} 

2、设置路由拦截

router.beforeEach((to, from, next) => { //matched的数组中包含$route对象的检查元字段 //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值 if (to.matched.some(record => record.meta.requiresAuth)) {  //判断当前是否有登录的权限  if (!auth.loggedIn()) {   next({    path: '/login',    query: { redirect: to.fullPath }   })  } else {   next()  } } else {  next() // 确保一定要调用 next() }})

3、设置拦截器

这里使用axios的拦截器，对所有请求进行拦截判断。

在后面的所有请求中都将携带token进行. 我们利用axios中的拦截器, 通过配置http response inteceptor, 当后端接口返回401 (未授权), 让用户重新执行登录操作。

// http request 拦截器axios.interceptors.request.use( config => {  if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token   config.headers.Authorization = `token ${store.state.token}`;  }  return config; }, err => {  return Promise.reject(err); });// http response 拦截器axios.interceptors.response.use( response => {  return response; }, error => {  if (error.response) {   switch (error.response.status) {    case 401:     // 返回 401 清除token信息并跳转到登录页面     store.commit(types.LOGOUT);     router.replace({      path: 'login',      query: {redirect: router.currentRoute.fullPath}     })   }  }  return Promise.reject(error.response.data) // 返回接口返回的错误信息});

4、将token存储在本地中

可以使用cookies/local/sessionStograge

三者的区别: