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
重复上面的步骤……