vue cli中token验证

Posted sexintercourse

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue cli中token验证相关的知识,希望对你有一定的参考价值。

1.设置前端路由跳转

router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.auth)) {
// 判断token是否存在,如果存在则正常跳转
if (localStorage.getItem(token)) {
next()
} else {
next(/login)
}
} else {
next()
}
})

 这里我们只是列举了一部分的代码,全量的代码请查看。

import Vue from vue
import Router from vue-router
import HelloWorld from @/components/HelloWorld
import StudentsInfo from @/components/StudentsInfo
import Login from @/components/Login

Vue.use(Router)

let router = new Router({
  routes: [{
      path: /,
      name: HelloWorld,
      component: HelloWorld
    },
    {
      path: /StudentsInfo,
      name: StudentsInfo,
      component: StudentsInfo
    },
    {
      path: /Login,
      name: Login,
      component: Login
    }
  ]
})

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === /Login) {

    next();
  } else {
    let token = localStorage.getItem(Authorization);
    if (token === null || token === ‘‘) {
      next(/Login);
    } else {
      next();
    }
  }
});

export default router;

 


2.登录成功,将token存储

login () {
// 发起请求登录
axios.post(/user/login, this.user).then(res => {
console.log(res.data)
// 接收到token后将token存储到localstorage
// 前缀必须要加
localStorage.setItem(token, "Bearer " + res.data.res.token)
})
}

 


3.设置请求拦截器
 

只要有token就让每次请求都携带token

// 设置请求拦截器
axios.interceptors.request.use(config => {
// console.log(config)
const token = localStorage.getItem(token)
if (token) {
// 将获取到的token设置给header中的Authorization
config.headers.Authorization = token
}
return config
})

 

4设置响应拦截器

 对响应结果进行处理,token出现问题,返回一定是401

// 设置响应拦截器
axios.interceptors.response.use(res => {
// 对结果进行处理
if (res.data.res_code === 401) {
// 跳转登录
router.replace(/login)
// 删除token
localStorage.removeItem(token)
}
return res
}, err => {
// 如果是正常接口,会走err,err.response.status值为401 进行跳转及删除token的操作
})

以上是关于vue cli中token验证的主要内容,如果未能解决你的问题,请参考以下文章

token验证机制

token登录验证机制

简单介绍vue获取token实现token登录的示例代码

vue cli - Uncaught SyntaxError: Unexpected token <

vue-cli-service: SyntaxError: Unexpected token '...'。需要一个属性名称

vue 中token验证