vue路由到一个新的窗口怎么弄那个token

vue项目,想用router-link链接到一个新的窗口,但是路由导航守卫会把新界面弄到login界面,这怎么办呢

token是字符串令牌,需要后端的结合,后端导入相关依赖,根据一定的规则生成一个包含登录信息的字符串令牌也就是token,然后封装成json数据包发送给前端,前端拿到token每次请求跳转的时候就会带着token,这样就不需要反复验证用户信息也就不会去登录页面了。

需要设置成新窗口

main.js配置一下config.headers.Authorization = window.sessionStorageu.getItem('token')

这是我对token的处理。


import axios from 'axios'
import {  Message } from 'element-ui'
import router from '@/router';



const service = axios.create({
    //timeout: 60000
})
/** 添加请求拦截器 **/
service.interceptors.request.use(
    config => {
        if (localStorage.getItem('token')) {
            config.headers['token'] = localStorage.getItem('token')
        }
        if (config.method == 'post') {
            config.headers['Content-Type'] = 'application/json'
        }
        if (config.data instanceof FormData) {
            config.headers = {
                'Content-Type': 'multipart/form-data',
                'token':localStorage.getItem('token')
            }
        }
        return config
    },
    error => {
        console.log(error)
        return Promise.reject(error)
    }
)

// 这里的conut 是为了防止tokne失效导致太多提示框弹出
let count = 0
/** 添加响应拦截器  **/
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code != 2000) {
            if (res.code == 2001) {
                if (count === 0) {
                    Message({
                        message: "身份验证过期,请重新登录!",
                        type: "error",
                    });
                }
                localStorage.removeItem("token")
                router.push({ path: '/login', query: { path: router.currentRoute.fullPath } })
            }

            // else if (res.code == 10001) {
            //     Message.error(res.msg);
            // }
            count++
            return response

        } else {
            return response
        }

    },
    error => {
        if (count === 0) {
            console.log(error.response);
            if( error.response.data.code == "2001" ){
                Message({
                    message: '登录令牌失效,请重新登录',
                    type: 'error',
                    duration: 3 * 1000
                })
                count = 0;
                localStorage.removeItem("token")
                router.push({ path: '/login', query: { path: router.currentRoute.fullPath } })
            }else{
                Message({
                    message: error.message,
                    type: 'error',
                    duration: 5 * 1000
                })
            }

        }
        count++
        //return Promise.reject(error)
        return error;
    }
)

export default service

```

用vuex存一下,路由跳转之前判断一下有没有,没有就去login,有就跳过去

可以在首次登录成功之后,将后端返回的token存下来,可以放到vuex,也可以放到缓存;
然后每次发送请求的时候带上这个token,如果token过期,后端可能会报错,我们拦截错误并返回登录页面,并清除原来的token,要求重新登录;
再次登录成功之后保存返回的新token,同样在发送请求时候带上这个新的token
重复上面的步骤……