Element-ui中Token的使用---Vue实现完整的系统登录退出功能

一、技术提要

• 涉及element-ui中的validate方法
  

二、具体实现

1、表单部分代码

	
        
        
          	
        
        
        
          	
        
        
        
          	登录
          	重置
        
	

2、JavaScript代码

说明：

• script内使用this.$refs.loginFormRef获取到表单引用对象（注意：表单中el-form组件需要有ref=“loginFormRef”）
• window.sessionStorage.setItem(‘token’, res.data.token)可将token存储到客户端的 sessionStorage 中， res.data.token为存储的值。

3、使用VueRouter限制页面访问

• 使用路由守卫阻止未登录用户访问登陆页面以外的页面

router.beforeEach((to, from, next) => {
	  //如果前往登陆页面放行
	  if (to.path === '/login') return next()
	  
	  //读取客户端sessionStorage 中存储的Token
	  const tokenStr = window.sessionStorage.getItem('token')
	  
	  //判断Token是否存在，存在则放行，不存在则需进行登录
	  if (!tokenStr) return next('/login')
	  next()
})

4、使用axios拦截器功能—书写在入口文件main.js中

• 使用axios拦截器设置每次请求所携带的请求头（除登录之外的其他API接口，必须在携带与后端约定的请求头）
• 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌（此处与后端开发人员进行约定）

axios.interceptors.request.use(config => {
   //此处读取上文存储的token并设置请求头
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 这里需要注意，必须return config才能生效
  return config
})

5、退出功能

• 在退出按钮上绑定logout() 事件，清空本地存储的token并将路由重定向至登录页面。

logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }

至此一个完整的系统登录退出功能以完成！！！