1const Login = { template: "<p>You are not logged in.</p>" }
2const Profile = { template: "<p>Welcome to profile</p>" }
3const Unauthorized = { template: "<p>You are not authorized</p>" }
4
5const router = new VueRouter({
6 routes: [
7 { path: '/login', component: Login },
8 { path: '/unauthorized', component: Unauthorized },
9 { path: '/profile', component: Profile }
10 ]
11})
12
13new Vue({
14 el: '#app',
15 router,
16 data:{
17 userRole: '',
18 isAuthenticated: false
19 },
20 created() {
21 this.checkAuthentication();
22 },
23 methods: {
24 checkAuthentication() {
25 const token = localStorage.getItem('token');
26 console.log(`token got: ${token}`)
27 this.isAuthenticated = !!token;
28
29 if (this.isAuthenticated) {
30 this.userRole = localStorage.getItem('userRole') || 'user';
31 console.log(`role got: ${this.userRole}`)
32 } else {
33 console.log("no token got")
34 this.$router.replace('/login');
35 }
36 },