(vue)网站uv 没有用户登录前端自动生成token

(vue)网站uv 没有用户登录前端自动生成token

方案:
在这里插入图片描述


生成代码:
main.js

import Vue from 'vue'
import App from './App'
...

//生成一个唯一的token
const generateToken = () => {
  const token = Math.random().toString(36).substr(2); //这里可以根据需要添加更多的逻辑来生成token
  return token;
}

//检查cookies中是否存在tokenconst
const tokenExists = Vue.$cookies.isKey('token');

if (!tokenExists) {
  //如果token不存在,则生成一个新的token并保存在cookies中
  const newToken = generateToken();
  Vue.$cookies.set('token', newToken);
}

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

页面获取:

mounted() {
    //获取token
    this.token = this.$cookies.get("token");
  },

结果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中实现token的自动登录可以通过以下步骤: 1. 在用户登录成功后,将获取到的token存储到sessionStorage中,可以使用`sessionStorage.setItem('token', token)`来实现。 2. 在Vuex的store中,创建一个state属性来存储token,可以使用`state: { token: sessionStorage.getItem('token') || '' }`来初始化token的值。 3. 在main.js中使用导航守卫来进行路由跳转的判断。首先判断目标路由是否为登录页,如果是,则直接跳转。否则,从store中获取token的值,如果token为空,则跳转到登录页,否则继续跳转到目标路由。 4. 在登录页或任何需要验证登录状态的组件中,通过调用store中的token来判断用户是否已登录。如果token为空,则说明用户未登录,需要跳转到登录页。 以下是一个示例代码,演示了如何实现Vue3中的token自动登录: 在store/index.js中: ```javascript import { createStore } from 'vuex' const store = createStore({ state: { token: sessionStorage.getItem('token') || '' } }) export default store ``` 在main.js中: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) router.beforeEach((to, from, next) => { if (to.path === '/login') { next() } else { const token = store.state.token if (token === '') { next('/login') } else { next() } } }) app.mount('#app') ``` 在登录组件中: ```vue <template> <div> <!-- 登录表单 --> <form> <!-- 表单输入项 --> </form> <!-- 登录按钮 --> <button @click="login">登录</button> </div> </template> <script> export default { methods: { login() { // 登录逻辑 // ... // 登录成功后将token存储到sessionStorage中 sessionStorage.setItem('token', token) // 跳转到其他页面 this.$router.push('/index') } } } </script> ``` 通过以上步骤,你可以在Vue3中实现token的自动登录功能。当用户成功登录并获取到token时,将token存储到sessionStorage中,并在每次路由跳转前检查token的值来判断用户是否已登录。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue实现token登录](https://blog.csdn.net/weixin_43896327/article/details/115244762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值