2020-07-07 Frontend handle Authorization


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

我使用 [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 源码,设计思想,中台实现,吧啦吧啦的,给人一种没有实际开发经验的感觉。