vue项目登录token验证

首先，在登录时将token字段存储到本地sessionStorage中。

<el-button type="primary" plain @click="login">登录</el-button>

 // 验证表单登录是否通过 表单的valid方法
 // 在返回数据是promise时，我们可以使用await来简化promise
 // 同时要把紧挨着await的方法修饰成异步的async方法
 login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // 将data解构出来赋值给res
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        // 登录后的token需要保存到客户端, 由于token只应在当前网站打开期间生效，所以保存在sessignStorage中
        // 因为项目中出了登录之外的api接口需要登录后才能进行访问
        window.sessionStorage.setItem('token', res.data.token)
        // 然后通过编程式导航在登录成功后跳转到项目的主页，路由地址是/home
        this.$router.push('/home')
     })
   }

以axios网络请求为例，在项目的min.js中，导入axios，通过axios的请求拦截器interceptors添加token验证字段。

// 导入网络请求axios
import axios from 'axios'

// 配置公共的请求的根路径
axios.defaults.baseURL = 'http://java.com:8888/api/production/'

// 通过axios拦截器interceptors添加token验证
axios.interceptors.request.use(config => {
  // 初始登录后Authorization的值是null空，当请求其需要登录后才能请求的接口后才会被赋值
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 必须将config return出来
  return config
})

// 全局注册axios
Vue.prototype.$http = axios

在router文件夹下的index.js路由配置文件中挂载路由的前置导航守卫router.beforeEach中作一些登录的限制。

// 挂载路由前置导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 表示从哪个路径跳转过来
  // next 是一个函数，表示放行
  if (to.path === '/login') return next() // 如果访问的是登录页则直接放行，否则需要强制登录
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login') // 如果获取的不是token，则强制登录，否则放行
  next()
})