vue token__登录思维和处理

token__登录思维和处理

思维：

1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问（路由导航守卫）
   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
2. 通过编程式导航跳转主页
3. 退出时，清除token
4. 请求参数时，携带上token

一、将token和userId存储到localStorage中，并跳转
在登录组件的methods中：

 async sendData (formName) {
      const { data: res } = await this.$http.post('/login')
      if (res.code !== 20000) return this.$message.error('登录失败！')
      this.$message.success('登录成功')
      // 将token存入localStorage
      localStorage.setItem('visualizationtoken', res.data.token.value)
      // 将userId存入localStorage
      localStorage.setItem('visualizationuserId', res.data.userInfo.userId)
      // 2. 通过编程式导航跳转到主页，路由地址是 /home
      this.$router.push('/home')
    }

以上代码注意点：对于token的命名前最好携带上自己的项目名，因为在同一域名服务器上，可能有多个项目，命名冲撞了会导致在运维那块出现一些bug(此是听别人说了一遍记的，可能记的有点偏颇，如有不对，请指正，谢谢。)

二、路由导航守卫
在router.js文件中

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  //     next()  放行    next('/login')  强制跳转
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = localStorage.getItem('visualizationtoken')
  if (!tokenStr) return next('/login')
  next()
})

三、退出-清除token
在登录组件的mounted中

 mounted () {
    if (localStorage.getItem('visualizationtoken') && localStorage.getItem('visualizationuserId')) {
      localStorage.removeItem('visualizationtoken')
      localStorage.removeItem('visualizationuserId')
    }
  }

四、每次请求都携带上token
在main.js文件中

// 每次请求都带上token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('visualizationtoken')
  //当有token的时候
  if (token) {
    config.headers.common['Authorization'] = 'bearer ' + token
  //当没有token的时候
  } else {
    config.headers.common['Authorization'] = 'Basic YWxsOmFsbA=='
  }
  return config
})

以上代码中的bearer和Basic YWxsOmFsbA== 每个人的可能不同，由此获得：

此时还未登录，没有token：

登录之后，已经拿到token了：