vue全局配置请求token_详解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.loggedI