分享一个简单登录认证实现

我使用 [Axios](https://github.com/axios/axios) 作为 HTTP client。

原则

1. 不创建 axios 实例，仅使用 global axios
2. 避免在 UI 层写认证逻辑

步骤

1. 从 localStorage 中读取 token，并设置到 header 中

axios.defaults.headers.common['Any-Token-Key'] = localStorage.getItem('any-token-key')

2. 拦截 response，处理 401 Unauthorized 错误。

axios.interceptors.response
  .use((response) => {
    return response
  },
  function (error) {
    if (error.response.status === 401) {
      router.go('/login')
    }
  })

3. 编写 login 逻辑

export const login = async ({user, password}) => {
  const { data } = await axios.post('/login', {user, password})
  const { token } = data

  localStorage.setItem('any-token-key', token)
  axios.defaults.headers.common['Any-Token-Key'] = token
}

一点点小感悟

前端登录认证是一个基础到不能再基础的功能，可是我发现不少号称有几年开发经验的程序员还是写不出来。

虽然不知道具体原因，但是我推测可能有一下原因

1. 没有参与过新项目的开发，所以没有接触过登录认证模块。
2. 绝大多数公司在面试时不会问这种基础的问题，所以一门心思扑在“高大上”的算法和源码。
3. 没有阅读过其他项目的登录认证代码，只了解目前项目的逻辑。

其实，日常工作中没那么多造火箭的的工作，算法和源码理解虽然很重要，但是基本的代码能力也是必不可少的。

来面试的同学/前辈们一上来就谈 Vue/React 源码，设计思想，中台实现，吧啦吧啦的，给人一种没有实际开发经验的感觉。