前端必会的登录流程

最新推荐文章于 2024-11-05 15:31:54 发布

^^为欢几何^^

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量68

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52526079/article/details/134201315

版权

文章介绍了如何使用axios进行二次封装，实现请求拦截以携带token进行身份验证和授权控制，同时处理响应拦截，包括登录超时或token错误的提示。还讨论了使用localStorage存储token以保持用户登录状态，以及在退出操作时清除token和缓存的逻辑。

摘要由CSDN通过智能技术生成

axios二次封装，实现请求拦截（判断是否有token，如果存在token，则在请求头中携带token）和响应拦截（如果请求失败，该做出哪些提示）

请求拦截时携带请求头的目的：

身份验证：通过在请求头中携带身份验证的token或者其他凭证，可以确保请求的合法性和安全性。服务器可以根据请求头中的凭证进行身份验证，以确定是否允许该请求的访问权限。
授权控制：某些接口可能需要特定的权限才能访问，通过在请求头中携带权限信息，服务器可以根据请求头中的权限信息进行授权控制，决定是否允许该请求的访问。

通过定义的service请求登录接口，触发上述的请求拦截，判断是否已经登录，如果登录则会存在token，反之不存在

const service = axios.create({
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // debugger
    // 如果存在token，则在请求头中携带token
    if (store.state.token) {
        // debugger
        config.headers['Authorization'] = store.state.token
    }
    return config
  },
  error => {
    // console.log(error)
    Promise.reject(error)
  }
)
service.interceptors.response.use(
    function (response) {
        if ('code' in response.data) {
            if (response && response.data && response.data.code !== 200) {
                if (
                    response &&
                    response.data &&
                    (response.data.code === 999 || response.data.code === 401)
                ) {
                    if (localStorage.getItem('token')) {
                        MessageBox.alert('登录超时或token错误,请重新登录', '提示', {
                            type: 'warning',
                            confirmButtonText: '确定',
                            beforeClose: () => {
                                localStorage.removeItem('token')
                                localStorage.clear()
                                router.replace('/login')
                                window.location.reload()
                            },
                        })
                    }
                } else {
 Message.error(response.data.message)
                }
                return Promise.reject(response)
            } else {
                return response
            }
        } else {
            return response
        }
    },

    function (error) {
        if (error.response.status === 403) {
            MessageBox.alert('登录超时或token错误,请重新登录', '提示', {
                type: 'warning',
                confirmButtonText: '确定',
                beforeClose: () => {
                    localStorage.removeItem('token')
                    localStorage.clear()
                    router.replace('/login')
                    window.location.reload()
                },
            })
            return Promise.reject(error.response)
        }
    }
)

export default service

3.通过定义的service请求登录接口成功之后，服务器会返回一个token，此时将返回的token和输入的用户名分别存在vuex和localStorage

import service from '../../utils/request.js'
 submitForm () {
            this.$refs['ruleForm'].validate((valid) => {
                // console.log("++qian++",request.defaults.headers)
                if (valid) {
                    this.service.post('/src/views/Login', this.ruleForm)
                        .then((res) => {
                            if (res.data.code === 200) {
                                let token =res.headers + '' + res.data.data.token
                                localStorage.setItem('token', token)
                                localStorage.setItem(
                                    'username',
                                    this.ruleForm.username
                                )
                                this.$store.commit('setToken', token)
                                this.$store.commit(
                                    'setUserInfo',
                                    res.data.data.userInfo
                                )
                            } else {
                                this.$message.error(res.data.message)
                            }
                        })
                        .catch(() => { })
                }
            })
        },

问题一：之所以localStorage存放token，是因为当处于登录状态的用户如果刷新页面，就会导致vuex里面的token不存在，如果不在localStorage存放token，按照正常逻辑，如果没有token就返回登录界面，因此会造成处于登录状态的用户刷新一下页面就要重新登陆体验感差的问题，所以localStorage存放token。

问题二：将token存放到localStorage后，浏览器在刷新之后如何判断localStorage是否存在token，因此可以通过在main.js问价中执行下面两种方法

方法一：

数据持久化
let token = localStorage.getItem('token')
token && store.commit('setToken', token)
导航守卫
router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
        next()
    } else if (!store.state.token) {
        next('/login')
    } else {
        next()
    }
})

方法二：

4.退出操作时，清除所有token和缓存，并进行路由跳转

logout() {
            localStorage.removeItem('token')
            localStorage.clear()
            this.$store.commit('setToken', '')
            this.$router.replace('/login')
        },