Vue使用token进行登录验证和拦截

[221900235-赖欣怡]

目录

• 1. 技术概述
• 2.技术详述
• 流程图
• 实现步骤
• 3.问题和解决过程
• 4. 总结
• 5.参考文献、参考博客

1. 技术概述

网页中的很多页面在访问之前都需要登录，如果用户没登录，需要跳转到登录页面，因此需要对用户的登录状态进行判断和拦截，这里主要用token的方式实现。

2.技术详述

流程图

实现步骤

这里仅说明前端的实现。
(1)首先在定义路由时(router.js)需要添加一个字段：requireAuth，用于判断访问这个路径是否需要经过登录。

{
    path: '/community',
    name: 'Community',
    meta:{
      requireAuth:true
    },
    component: () => import('@/views/admin/community')
  },

(2) 在项目中的store.js或store/index.js文件中添加存储和删除token的全局方法。

export default new Vuex.Store({
  state: {
    // 登陆状态
    isLogin: '0',
    //token存储
    token:localStorage.getItem('token') ? localStorage.getItem('token'):'', 
  },
  mutations: {
    $_setToken(state, value) { // 设置存储token
      state.token = value;
      localStorage.setItem('token', value);
    },
    $_removeStorage(state, value){  // 删除token
        localStorage.removeItem('token');
    },
  }
})

(3) 在登录页面调用登录接口的方法中，从后端返回的数据获取token并存储在localStorage中。

// 登陆请求
      this.$axios({
      url:'/admin/login',
      method:'post',
      params:{
        username:this.username,
        password:this.password
      }
    }).then((response) =>{ 
      //console.log(response.data)
      // 登录成功
      if(response.data.code==200){
        //console.log(response.data.data.token)
        this.success();
        this.$store.commit('$_setToken', response.data.data.token);
        console.log(window.localStorage.token)
        this.$router.push('/baseState')
      }else{
        this.$message.error("账号或密码错误");
      }
    }).catch((error) =>{
      this.$message.error("登录失败，请检查网络情况或稍后重试");
    })

(4) 在main.js中添加拦截器，并在请求头中添加token，使每次的请求中都带有token。主要用到了vue-router的钩子函数**beforeEach()**。

// http request 拦截器
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  console.log(window.localStorage.getItem("token"))
  //为请求头对象，添加token验证的Authorization字段
  config.headers.token = window.localStorage.getItem("token")
  return config
})

//登录拦截
router.beforeEach((to,from,next)=>{
  console.log(to.meta.requireAuth)
  console.log(window.localStorage.token)
  if (to.meta.requireAuth) {
//requireAuth若为true,则该路由需要判断是否登录
    if (window.localStorage.token) {
      next();
    }
    else {
      next({//返回登录页面
        path: '/',
        query: {redirect: to.fullPath}
      })
    }
  }
  else {
    next();
  }
})

new Vue({
  axios,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

可以在开发者工具中查看是否成功添加token到请求头。

(4) 退出登录时，在相应方法中清除token，并返回登录页面。

methods:{
    // 退出登录
    logout(){
      window.localStorage.removeItem('token')
      this.$router.push('/')
    }

3.问题和解决过程

在main.js添加拦截器后不起作用，但仔细检查后发现代码是正确的，token也有存入，但是直接修改路由还是可以跳转，原因是Vue生命周期的问题，把添加拦截器的代码放在了vue实例创建代码的后面。

解决：把new Vue...这段代码放在添加拦截器代码的最后。

4. 总结

vue实现登录验证和拦截的整个过程比较清晰，步骤也很明确，但遇到问题时还是需要一步步地查找问题代码，耐心解决。

5.参考文献、参考博客

简单实现vue中的登录拦截
vue token的简单理解和使用