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

工作原理

• 前端页面进行登录操作, 将用户名与密码发给服务器;
• 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端
• 前端将token保存在本地中, 建议使用localstorage进行保存.  下次对服务器发送请求时, 带上本地存储的token
• 服务器端,进行对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

三者的区别:

• sessionstorage 不能跨页面共享的，关闭窗口即被清除，
• localstorage 可以同域共享，并且是持久化存储的
• 在 local / session storage 的 tokens，就不能从不同的域名中读取,甚至是子域名也不行.
• 解决办法使用cookie.demo: 假设当用户通过 app.yourdomain.com 上面的验证时你生成一个 token 并且作为一个 cookie 保存到 .yourdomain.com,然后，在 youromdain.com 中你可以检查这个 cookie 是不是已经存在了，并且如果存在的话就转到 app.youromdain.com去。这个 token 将会对程序的子域名以及之后通常的流程都有效（直到这个 token 超过有效期）只是利用cookie的特性进行存储而非验证.

关于xss和xsrf的防范:

• xss 攻击的原理是，攻击者插入一段可执行的 javascripts 脚本，该脚本会读出用户浏览器的 cookies 并将它传输给攻击者，攻击者得到用户的 cookies 后，即可冒充用户。
• 防范 xss ，在写入 cookies 时，将 httponly 设置为 true，客户端 javascripts 就无法读取该 cookies 的值，就可以有效防范 xss 攻击。
• csrf是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
• 防范 csrf: 因为 tokens 也是储存在本地的 session storage 或者是客户端的 cookies 中，也是会受到 xss 攻击。所以在使用 tokens 的时候，必须要考虑过期机制，不然攻击者就可以永久持有受害用户帐号。

相关文章: xss 和 csrf简述及预防措施

 //login.vue
 methods: {
  login(){
   if (this.token) {
    //存储在本地的localstograge中
    this.$store.commit(types.login, this.token)
    //跳转至其他页面
    let redirect = decodeuricomponent(this.$route.query.redirect || '/');
    this.$router.push({
     path: redirect
    })
   }
  }
 }

在vuex中:

import vuex from 'vuex';
import vue from 'vue';
import * as types from './types'

vue.use(vuex);
export default new vuex.store({
 state: {
  user: {},
  token: null,
  title: ''
 },
 mutations: {
  //登录成功将, token保存在localstorage中
  [types.login]: (state, data) => {
   localstorage.token = data;
   state.token = data;
  },
  //退出登录将, token清空
  [types.logout]: (state) => {
   localstorage.removeitem('token');
   state.token = null
  }
 }
});

在./types.js中:

export const login = 'login';
export const logout = 'logout';

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。