出于安全考虑,当用户登录后,本地浏览器需要保存保存服务器返回的token,并默认存储为头文件,在用户接下来访问每个界面时都携带着这个头部进行验证。若检测到非法登录状态,则进行路由拦截,无法正常访问资源+跳转至登录界面。
这里只记录前端板块,最基础的地方。

1.首先,登录验证,保存token

sessionStorage.setItem("token",res.data.token)  //存储token
sessionStorage.setItem("userid",res.data.msg.userId) //存储用户名

//sessionStorage.getItem("token") 读取token。

这里的sessionStorage可以理解成(用户本地)浏览器临时保存的仓库,setItem设置以键值对形式存储。
注意点:
常用保存token的有两个:sessionStorage和localStorage

他们的功能相同,不同点在于:

  • sessionStorage : 临时存储,当本界面关闭后所有数据都将清空。
  • localStorage :永久存储,只要你没有手动删除就会一直存在。

本次选择sessionStorage 主要是为了方便测试,实际开发中肯定是localStorage 更常用,毕竟老要登录用户也会烦嘛~
(不过更正规的登录验证肯定是会设置token的实效性的)

2.添加请求拦截器

在config,js文件中配置请求拦截器,把token作为头部文件,当浏览器发送请求时把用户验证的头部加上去。(用于提交给后端验证)

import axios from 'axios'
//创建一个axios实例
const service =axios.create({
    //请求超时
    timeout:3000,
    //baseURL:'/api'
})

//添加请求拦截器
service.interceptors.request.use(
    config =>{
        config.headers = {  //设置头文件
            "Authorization":"Bearer "+sessionStorage.getItem("token") 
        }
        return config
    },
    err =>{
        console.log(err)
    }
)

service.interceptors.response.use(
    response=>{
        let res={}
        res.status = response.status
        res.data=response.data
        return res
    },
    err => console.log(err)
)

export default service

3.添加跳转拦截器(前端)

在跳转到对应资源界面之前,进行一个简单的前端验证。
如果跳转向非登录界面,且没有token(即未登录状态),则改变路由跳转向登录界面。
在router/index.js中配置:

router.beforeEach((to,from,next) =>{
   const token = sessionStorage.getItem('token')
   console.log('token:',token)
   if(to.name !='login' && !token){
      next({
        name:'login'
      })  //没去登录页,还没token,跳转去登录页
   } 
   else next()  //正常跳转
})

这块其实写的还有问题,没有和后端交互验证,假如用户知道怎么自己加头部token,难道随便一个不合法token就让他上去了吗?


修改新增:
有请求拦截器,对应的便有响应拦截器。即响应时候拦截验证,假如登录状态不合法就跳去登录界面。
(在config,js中新增)

//响应拦截器
axios.interceptors.response.use(response => {
    return response
}, error => {
    this.$router.push({
        path:'/'
    })
    return Promise.resolve(error.response)
})

service.interceptors.response.use(
    response=>{
        let res={}
        res.status = response.status
        res.data=response.data
        return res
    },
    err => console.log(err)
)
Logo

前往低代码交流专区

更多推荐