• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

vue-登录成功 保存 token ,根据 token 跳转路由

武飞扬头像
好多吃的啊
帮助1

在路由跳转中我们会用到 登录成功后保存的 token

目的是为了 避免没有登录也能打开我们的项目操作页面

login.vue

学新通

this.$refs.loginForms.validate((valid) => {
                    if (valid) {
                        that.$post('/login',{
                            phone: that.loginForm.username,
                            password: that.loginForm.password
                        },function(ret){
                            that.loginLoading = false;
                            if(ret.msg == "success"){
                                sessionStorage.setItem("token","success");
                                that.$message({type: "success", message: "登录成功"})
                                return that.$router.replace("/home");
                            }else{
                              that.$message({type: 'error', message: ret.msg || '请检查您的用户名和密码'})
                            }
                        })
                    } else {
                        that.$message({type: 'error', message: '请检查您的用户名和密码'})
                        this.loginLoading = false;
                    }
                })
路由(router - index.js):
学新通
// 导航守卫
router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem('token');
  const outerPaths = ['/account/login', '/account/register', '/account/forget','/auth', '/home/system/wph_set', '/home/system/pdd_set']; // 当前 path 不需要登录也可以进入系统,但是只能操作当前页面
  if (!token && !outerPaths.includes(to.path)) {
    next('/account/login');
  } else {
    if(to.path == "/auth") {
      document.title = to.meta.title  // 进入这个页面会被更改页面标题
    } else document.title = 'CPS流量变现后台管理系统'
    next();
  }
});

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhggefij
系列文章
更多 icon
同类精品
更多 icon
继续加载