Web前端最全Vue实现免密登录跳转的方式_vue怎么样不登录返回首页，最强技术实现

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

if (password && passwordPattern.test(password)) {
const newUrl = url.replace(/(password=)[^&]*/, $1${tranAscii(password)}) //密码中的特殊字符用一个别的特定字符替代
window.location.href = newUrl
} else {
if (Number(isFreeLogin) === 1 && to.path === ‘/login’ && from.path == ‘/’) {
loadingInstance = Loading.service({
background: ‘rgba(255,255,255,0.1)’,
text: ‘页面跳转中…’,
customClass: ‘login-loading’,
spinner: ‘el-icon-loading’
})
setFormData(() => {
next()
})
} else {
if (to.path === ‘/’) return next(‘/login’)
const token = localStorage.getItem(‘Admin-Token’)
if (!token && to.path !== ‘/login’) return next(‘/login’)
next()
}
}
})

router.afterEach((to, from) => {
NProgress.done()
loadingInstance.close()
})
export default router

function setFormData(cb) {
// 判断url后是否携带?isFreeLogin=1参数,如果存在，则免登录
const { username, password, isFreeLogin } = getQueryVariable()
if (isFreeLogin && Number(isFreeLogin) === 1) {
if (username !== undefined && password !== undefined) {
Vue.prototype.loginForm = {
username: username.trim(),
password: password.trim() //此处密码要做同步处理
}
} else {
Message.error({
showClose: true,
message: ‘用户名或密码为空!’
})
cb && cb()
}
}
if (JSON.stringify(Vue.prototype.loginForm) !== ‘{}’) {
handleLogin(Vue.prototype.loginForm, cb)
Vue.prototype.loginForm = {}
}
}

//登录逻辑
async handleLogin(form,cb){
try{
await login(form)
cb&&cb()
}catch{
cb&&cb()
}
}

 要注意一下两个问题：


（1）url中因为携带了账号、密码，密码可能会存在特殊字符，如果后端接口做了特殊字符的过滤，可能会报400的错误


### 最后

我可以将最近整理的前端面试题分享出来，其中包含**HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法**等等，还在持续整理更新中，希望大家都能找到心仪的工作。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**篇幅有限，仅展示部分截图：**

![](https://img-blog.csdnimg.cn/img_convert/ff6b8e636a356a01389cd2de0211d347.png)

![](https://img-blog.csdnimg.cn/img_convert/b24f32dd81ead796fa80c27c763d262c.png)

![](https://img-blog.csdnimg.cn/img_convert/c6265dc2681708533916a8d7910506b3.png)

c27c763d262c.png)

![](https://img-blog.csdnimg.cn/img_convert/c6265dc2681708533916a8d7910506b3.png)