vue2开发移动端解决登录成功后,登录页面还在的问题

Posted 2023-03-22

其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。 网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果

在router/index.js中
</>复制代码
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
export default new Router(
routes: [
path:"/", redirect:"/home",
path:"/login",name:"登录",component:resolve =>require(["@/components/login"],resolve),
path:"/home",name:"首页",component:resolve =>require(["@/components/home"],resolve)
]
)
其中redirect（默认跳转）可以直接写在home页面，刚进入页面直接跳转首页

然后我们在home.vue的 周期函数created里面做判断 Login的值状态（Login是在login.vue中localStorage存入的变量，现在我们先读取）

</>复制代码
created()
console.log(localStorage.getItem("Login"));
if(localStorage.getItem("Login"))
console.log("登录过了");//登录成功了，保留在登录页面
else
console.log("没有登录");
this.$router.push("/login");//没有登录过 返回登录页面

,
然后我们在login.vue 当用户请求数据成功的时候把Login的状态写入

</>复制代码
axios.post("后台接口",qs.stringify(
username:"用户名",
password: "密码"
),
headers: //请求头
"Content-Type": "application/x-www-form-urlencoded",
"Accept":"application/json"

).then((response) => //成功回调
if(response.data.status=="200")//状态正常的时候
this.$router.push("/home");
//存储名字为Login值为true的变量,方便我们在home页面判断是否登录
localStorage.setItem("Login",true)

, (error) =>
console.log(error);
);
如果首页有退出登录按钮，那退出的时候执行

</>复制代码
out()
localStorage.removeItem("Login");//删掉我们存的变量就可以了
this.$router.push("/login");//点击退成功按钮返回登录页面

这样就实现了Vue的登陆和注册，用户刷新浏览器，或者关闭在打开都保持登录状态 参考技术A 其实登录注册，并且登录一次保持登录的状态，是每个项目都需要实现的功能。 网上也有很多的方法，不过，不是通俗易懂，在这里说一下我自己的方法，非常简单实用
核心就是用localStorage存、取数据，这样当刷新浏览器，或者关闭在打开的时候能达到预期想要的效果
在router/index.js中
</>复制代码
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
export default new Router(
routes: [
path:"/", redirect:"/home",
path:"/login",name:"登录",component:resolve =>require(["@/components/login"],resolve),
path:"/home",name:"首页",component:resolve =>require(["@/components/home"],resolve)
]
)
其中redirect（默认跳转）可以直接写在home页面，刚进入页面直接跳转首页
然后我们在home.vue的 周期函数created里面做判断 Login的值状态（Login是在login.vue中localStorage存入的变量，现在我们先读取）
</>复制代码
created()
console.log(localStorage.getItem("Login"));
if(localStorage.getItem("Login"))
console.log("登录过了");//登录成功了，保留在登录页面
else
console.log("没有登录");
this.$router.push("/login");//没有登录过 返回登录页面

,
然后我们在login.vue 当用户请求数据成功的时候把Login的状态写入
</>复制代码
axios.post("后台接口",qs.stringify(
username:"用户名",
password: "密码"
),
headers: //请求头
"Content-Type": "application/x-www-form-urlencoded",
"Accept":"application/json"

).then((response) => //成功回调
if(response.data.status=="200")//状态正常的时候
this.$router.push("/home");
//存储名字为Login值为true的变量,方便我们在home页面判断是否登录
localStorage.setItem("Login",true)

, (error) =>
console.log(error);
);
如果首页有退出登录按钮，那退出的时候执行
</>复制代码
out()
localStorage.removeItem("Login");//删掉我们存的变量就可以了
this.$router.push("/login");//点击退成功按钮返回登录页面

这样就实现了Vue的登陆和注册，用户刷新浏览器，或者关闭在打开都保持登录状态 参考技术B vue2开发移动端解决登录成功后,登录页面还在的问题？
答：vue2开发移动端解决登录成功后,登录页面还在的问题，这是由于pc的内存总是处在于超负荷所造成页面滞留，建议删除磁盘中体积过大或者不使用的文件，或者重启；
回答完毕！ 参考技术C 1.在登录页面，先获取保存的重定向路径， state.redirect保存的是路径，state.otherQuery保存的是地址里的传参
2.登录成功之后，判断是否存在重定向地址，存在则跳转重定向的地址（这里跳转之前我加了个判断，就是redirect是否存在'?',如果存在，说明地址本身就包含了参数，只需要把otherQuery里的参数拼接进去就好了。 参考技术D 1、首先打开手机加速器，再打开并登录vue移动端。
2、其次进入主页面，点击右下角的设置。
3、最后找到关闭手机网页，点击确认即可完。

58面试 服务器端是如何实现登录验证的

输入了名称和密码 后提交是post动作，服务器收到用户名和密码后查询sql语句，select*from user where name =’’ and password=’’查看账户信息是否存在，在的话会在session里加入用户登录成功的信息，

 

Session对于浏览器会话来说，所有页面都一直有效，所有页面根据session里的信息判断用户是否登录，没有开cookie，session也失效，session id表示登录的信息，基于session id就知道用户是否登录了，sql语句可能从数据库里去，也可能从缓存里取，也可能直接用select * from user where user=’’,不加密码，直接把密码给查出来，查出来之后跟你输入的密码对比，这也可以，

基本的认证流程的方式